CODEWITHSUNDEEP
jqueryhtmlformsvalidation
chandan111
chandan111

Reputation: 251

Form Validation Using Jquery

I am using jQuery to validate my form. I would like to see if the username is a single word. I see selector in Jquery http://jqueryvalidation.org/category/selectors/ but don't know how to use it in my case.

<form id="register" name="register" action="/codejudge/contest.php" method="post" >
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username"  placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="password" name="password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" >Submit</button>

</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#register").validate({
errorElement: 'div',
rules:{
    "Username":{
    required: true,     
    minlength:5
    },
"password":{
required:true,
minlength:5
},
"Confirm_Password":{
required:true,
equalTo: "#password"
},
"email":{
required:true,  
}
},
messages: {
    Username:{
                 required: "Please provide a username",
                minlength: "Your password must be at least 5 characters long"
    },
     password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
                },
     Confirm_Password: {
                required: "Please provide a confirm password",
                equalTo: "Please enter the same password as above"
                }
    },
    email:{
                required: "Please provide a valid email",
    } 
  });  
 });
 </script>

Upvotes: 1

Views: 17179

Answers (3)

argonaut36
argonaut36

Reputation: 461

You can create a custom rule that checks for a curtain amount of words. For Example

$("#register").validate({
jQuery.validator.addMethod("amountOfWords", function(value, element, options) {
    return this.optional(element) || /*regular expression logic*/;
}, "Too many words entered");

rules:{
    "Username":{
    required: true,     
    minlength:5,
    amountOfWords: 1
    }

}
}

Upvotes: 2

Makrand
Makrand

Reputation: 587

  1. Add a validator(function) of this sort :
jQuery.validator.addMethod('word_check', function (value, element) { 
  var word = "ausername";
  var space_check = word.split(" ")[1];
  //if space check is undefined you have a single word!
});

now in your Rules code :

rules:{
    "Username":{
    required: true,     
    minlength:5,
    word_check : true
    },

Upvotes: 5

Will
Will

Reputation: 3044

Add a regex match on the field to make sure it is only letters, numbers, - or _ Below is how to add a rege match to a field. 

$("#Textbox").rules("add", { regex: "^([a-zA-Z0-9-_])*$" })

Upvotes: 4

Related Questions