Reputation: 51

Using JavaScript Spring MVC Client Side Validation

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"
    }       

}

Upvotes: 1

Answers (3)

user2575725

Reputation:

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

Upvotes: 2

Sunil Bharath

Reputation: 206

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;
}

Upvotes: 0

Tasmine Rout

Reputation: 181

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

Upvotes: 0

Using JavaScript Spring MVC Client Side Validation

Answers (3)

Related Questions