title: Using JavaScript Spring MVC Client Side Validation
body: <p>I am new to Spring MVC and JavaScript and I am trying to validate a view using JavaScript (client side).  Validation is working, but the problem is, when the error occurs, I am unable to stop form submission.  It's going to post method.</p>
  
  <p>How can I stop the submission if error occurs?</p>
  
  <p>My view is <strong>registration.jsp</strong></p>
  
  <pre><code>&lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;script src="&lt;c:url value="/resources/js/j.js" /&gt;"&gt;&lt;/script&gt;
      &lt;title&gt;Insert title here&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
  &lt;h2&gt;Please,Do Registration&lt;/h2&gt;
       &lt;form:form  id="form" method="POST" action="/spring-ex02/user/reg"   
         commandName="login" &gt;
        &lt;table&gt;
          &lt;tr&gt;
           &lt;td&gt;&lt;form:label path="email"&gt;Email&lt;/form:label&gt;&lt;/td&gt;
           &lt;td&gt;&lt;form:input id="email" path="email" /&gt;&lt;/td&gt;
           &lt;td&gt;&lt;font id="emailError" style="color: red;"&gt;${emailExistError} 
           &lt;/font&gt;&lt;/td&gt;        
         &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;form:label path="password"&gt;Password&lt;/form:label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;form:input id="password" path="password" type="password"  
               /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;font id="passwordError" style="color: red;"&gt;${passwordError}
             &lt;/font&gt;&lt;/td&gt;
         &lt;/tr&gt;
  
  
       &lt;tr&gt;
          &lt;td&gt;&lt;form:label path="confirmPassword"&gt;Confirm Password&lt;/form:label&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;form:input id="confirmPassword" path="confirmPassword" 
              type="password"  /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;font id="confirmPasswordError" style="color: red;"&gt;&lt;/font&gt; 
          &lt;/td&gt;    
       &lt;/tr&gt; 
  
  
  
        &lt;tr&gt;
          &lt;td&gt;&lt;form:label path="userDetail.firstname"&gt;First Name&lt;/form:label&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;form:input id="firstName" path="userDetail.firstname" /&gt;&lt;/td&gt;
           &lt;td&gt;&lt;font id="firstNameError" style="color: red;"&gt;&lt;/font&gt; 
           &lt;/td&gt;        
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;&lt;form:label path="userDetail.lastname"&gt;Last Name&lt;/form:label&gt;
           &lt;/td&gt;
           &lt;td&gt;&lt;form:input id="lastName" path="userDetail.lastname" /&gt;&lt;/td&gt;
           &lt;td&gt;&lt;font id="lastNameError" style="color: red;"&gt;&lt;/font&gt; &lt;/td&gt;
  
        &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;form:label path="userDetail.address"&gt;Address&lt;/form:label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;form:input id="address" path="userDetail.address" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;font id="addressError" style="color: red;"&gt;&lt;/font&gt; &lt;/td&gt;
  
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td&gt;&lt;form:label path="userDetail.contact"&gt;Contact&lt;/form:label&gt;&lt;/td&gt;
           &lt;td&gt;&lt;form:input id="contact" path="userDetail.contact" /&gt;&lt;/td&gt;
           &lt;td&gt;&lt;font id="contactError" style="color: red;"&gt;&lt;/font&gt; 
          &lt;/td&gt;        
         &lt;/tr&gt;
  
  
  
    &lt;tr&gt;
      &lt;td colspan="2"&gt;
          &lt;input type="submit" onclick="validate()" value="Sign Up"/&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/table&gt;  
       &lt;/form:form&gt;
       &lt;form action="/spring-ex02/"  method = GET&gt;
      &lt;input type="submit" value="Back to Home"&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My js file is J.js</p>
  
  <pre><code>function validate(){
      var f=document.getElementById("form");
      validateEmail(f);
      validatePassword(f);
      firstNameValidate(f);
      lastNameValidate(f)
      addressValidate(f);
      contactValidate(f)
  
  
  }
  
  
  
  
  function validateEmail(form){
       var error=document.getElementById("emailError");
  
       var email=form["email"].value;
       error.innerHTML="";
        var regx = /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|
        (".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-
         Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
     if( email==null || email==""){
        error.innerHTML="Input Your Email";
      }
  
   else if(!email.match(regx)){
      error.innerHTML="Invalid Email";
   }
  
   }
  
   function  validatePassword(form){
      var error1=document.getElementById("passwordError");
      var error2=document.getElementById("confirmPasswordError");
      error1.innerHTML="Give Password";
  
      var password=form["password"].value;
  
      error1.innerHTML="";
      error2.innerHTML="";
  
      var confirmPassword=form["confirmPassword"].value;
  
      if( password==null || password==""){
          error1.innerHTML="Give Password";
      }
  
  
  
      else if( confirmPassword==null || confirmPassword==""){
          error2.innerHTML="Confirm Password";
      }
  
  
  
      else if(password.length&lt;5 || password.length&gt;10){
          error1.innerHTML="Password has to be 5 to 10 chars"
      }
  
      else if(password != confirmPassword){
          error2.innerHTML="Password Does Not Match"
      }
  
  
  
  }
  
  
  function firstNameValidate(from){
   var error=document.getElementById("firstNameError");
  
      var firstName=form["firstName"].value;
  
      error.innerHTML="";
  
      if( firstName==null || firstName==""){
          error.innerHTML="Input Your FirstName";
      }
  
      else if(!isNaN(id)){
          error.innerHTML="Name Can Not be a number";
      }
  
      else if(firstName.length&lt;5 || firstName.length&gt;10){
          error1.innerHTML="Name has to be 5 to 10 chars"
      }
  
  
      }
  
  function lastNameValidate(from){
   var error=document.getElementById("lastNameError");
  
      var lastName=form["lastName"].value;
  
      error.innerHTML="";
  
      if( lastName==null || lastName==""){
          error.innerHTML="Input Your LastName";
      }
  
      else if(!isNaN(id)){
          error.innerHTML="Name Can Not be a number";
      }
  
      else if(lastName.length&lt;5 || lastName.length&gt;10){
          error1.innerHTML="Name has to be 5 to 10 chars"
      }       
  
  }
  
  function addressValidate(from){
     var error=document.getElementById("addressError");
  
      var address=form["address"].value;
  
       error.innerHTML="";
  
      if( address==null || address==""){
          error.innerHTML="Input Your Address";
      }
  
      else if(!isNaN(id)){
          error.innerHTML="Address Can Not be a number";
      }
  
      else if(address.length&lt;5 || address.length&gt;10){
          error1.innerHTML="Address has to be 5 to 10 chars"
      }       
  
   }
  
   function contactValidate(from){
      var error=document.getElementById("contactError");
  
      var contact=form["contact"].value;
  
      error.innerHTML="";
  
      if( contact==null || contact==""){
          error.innerHTML="Input Your Contact";
      }
  
      else if(isNaN(id)){
          error.innerHTML="Name Can Not be alphabate";
      }
  
      else if(contact.length&lt;5 || contact.length&gt;10){
          error1.innerHTML="Contact has to be 5 to 10 chars"
      }       
  
  }
  </code></pre>