Using JavaScript Spring MVC Client Side Validation

Question

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.

How can I stop the submission if error occurs?

My view is registration.jsp

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script src="<c:url value="/resources/js/j.js" />"></script>
    <title>Insert title here</title>
 </head>
 <body>

<h2>Please,Do Registration</h2>
     <form:form  id="form" method="POST" action="/spring-ex02/user/reg"   
       commandName="login" >
      <table>
        <tr>
         <td><form:label path="email">Email</form:label></td>
         <td><form:input id="email" path="email" /></td>
         <td><font id="emailError" style="color: red;">${emailExistError} 
         </font></td>        
       </tr>
      <tr>
        <td><form:label path="password">Password</form:label></td>
        <td><form:input id="password" path="password" type="password"  
             /></td>
        <td><font id="passwordError" style="color: red;">${passwordError}
           </font></td>
       </tr>


     <tr>
        <td><form:label path="confirmPassword">Confirm Password</form:label>
        </td>
        <td><form:input id="confirmPassword" path="confirmPassword" 
            type="password"  /></td>
        <td><font id="confirmPasswordError" style="color: red;"></font> 
        </td>    
     </tr> 



      <tr>
        <td><form:label path="userDetail.firstname">First Name</form:label>
        </td>
        <td><form:input id="firstName" path="userDetail.firstname" /></td>
         <td><font id="firstNameError" style="color: red;"></font> 
         </td>        
      </tr>
      <tr>
         <td><form:label path="userDetail.lastname">Last Name</form:label>
         </td>
         <td><form:input id="lastName" path="userDetail.lastname" /></td>
         <td><font id="lastNameError" style="color: red;"></font> </td>

      </tr>
        <tr>
          <td><form:label path="userDetail.address">Address</form:label></td>
          <td><form:input id="address" path="userDetail.address" /></td>
          <td><font id="addressError" style="color: red;"></font> </td>

       </tr>
       <tr>
         <td><form:label path="userDetail.contact">Contact</form:label></td>
         <td><form:input id="contact" path="userDetail.contact" /></td>
         <td><font id="contactError" style="color: red;"></font> 
        </td>        
       </tr>



  <tr>
    <td colspan="2">
        <input type="submit" onclick="validate()" value="Sign Up"/>
    </td>
  </tr>


</table>  
     </form:form>
     <form action="/spring-ex02/"  method = GET>
    <input type="submit" value="Back to Home">
    </form>
</body>


</html>

My js file is J.js

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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\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<5 || password.length>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<5 || firstName.length>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<5 || lastName.length>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<5 || address.length>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<5 || contact.length>10){
        error1.innerHTML="Contact has to be 5 to 10 chars"
    }       

}

Rather than explicitly calling onclick on submit button prefer using the even listener mechanism. keep your submit button disabled, also use css to modify its color to something like grey till its disabled. register each element for focus out event and execute the validation on focus out. If the validation fails update a boolean variable to false whenever the validation fails. using && operator between boolean values for each element. submit should only be enabled when the final boolean value for elements is true. — RaghaveShukla
– RaghaveShukla, Commented Feb 12, 2016 at 4:02

score 2 · Accepted Answer · 2016-02-12 04:00:40Z

2

Problem is your are not cancelling the form submit event.

To cancel form submit, with few changes, try this out.

 <input type="submit" onclick="return validate()" value="Sign Up"/> <!-- added `return` -->

Also you need to modify your script as, false return value will cancel the event:

function validate(){
    var f=document.getElementById("form");
    return (validateEmail(f) &
           validatePassword(f) &
           firstNameValidate(f) &
           lastNameValidate(f) &
           addressValidate(f) &
           contactValidate(f));
}

You need to modify validation functions as well to return boolean value.

function validateEmail(form){
     //your validaton logic
     return "" === error.innerHTML;
}

Same has to be done for the rest of the functions

edited Feb 12, 2016 at 4:00

answered Feb 12, 2016 at 3:48

user2575725

Sign up to request clarification or add additional context in comments.

2 Comments

Ishmam Shahriar Over a year ago

Yes..its working....... thank you....but "in my form when i fill up all the fields and click submit..it goes to another page. If i come back to the form again...and submit keeping some fields blank than it is being submitted(should not be submitted). Is it coding problem or cookie related problem?"How can it be solved?

user2575725 Over a year ago

@IshmamShahriar, inspect the web browser console and try to re-create the said issue. Possibly it might be some javascript error by which the validation logic fails and the form gets submitted.

Tasmine Rout · Accepted Answer · 2016-02-12 03:45:01Z

0

Consolidate your validation methods. On failure use event.preventDefault()

answered Feb 12, 2016 at 3:45

Tasmine Rout

1816 bronze badges

Comments

Sunil Bharath · Accepted Answer · 2016-02-12 03:49:28Z

assign return parameter to each of the validation function. Below is the updated code for J.js

function validate(){
var f=document.getElementById("form");

var hasEmailError = validateEmail(f);
var hasPasswordError = validatePassword(f);
var hasFirstNameError = firstNameValidate(f);
var hasLastNameError = lastNameValidate(f)
var hasAddressError = addressValidate(f);
var hasContactError = contactValidate(f);

if(!hasEmailError || !hasPasswordError || !hasFirstNameError || !hasLastNameError || !hasAddressError || !hasContactError)
return false;
else
return true;
}

function validateEmail(form){
var error=document.getElementById("emailError");

var email=form["email"].value;
error.innerHTML="";
var regx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\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";
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}

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<5 || password.length>10){
error1.innerHTML="Password has to be 5 to 10 chars"
}

else if(password != confirmPassword){
error2.innerHTML="Password Does Not Match"
}
if(error1.innerHTML.length > 0 || error2.innerHTML.length > 0)
return false;
else
return true;


}


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<5 || firstName.length>10){
error.innerHTML="Name has to be 5 to 10 chars"
}

if(error.innerHTML.length > 0)
return false;
else
return true;
}

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<5 || lastName.length>10){
error.innerHTML="Name has to be 5 to 10 chars"
}       
if(error.innerHTML.length > 0)
return false;
else
return true;
}

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<5 || address.length>10){
error.innerHTML="Address has to be 5 to 10 chars"
}       
if(error.innerHTML.length > 0)
return false;
else
return true;
}

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<5 || contact.length>10){
error.innerHTML="Contact has to be 5 to 10 chars"
}       
if(error.innerHTML.length > 0)
return false;
else
return true;
}

Collectives™ on Stack Overflow

Using JavaScript Spring MVC Client Side Validation

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related