Develop Reference

How to add pattern RegEx for Form validation?

I have a registration form, in which I have used JavaScript form validator
My form
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="form-group" method="post" id="contact-form">
{% csrf_token %}
<input type"text" name="username" placeholder="userid" id="id_username"/>
<input type"email" name="email" placeholder="email" id="id_email"/>
<input type"password" name="password1" placeholder="password1" id="id_password1"/>
<input type"password" name="password2" placeholder="password2" id="id_password2"/>
<input type="address" name="address" placeholder="address" id="id_address"/>
<input type="submit"/>
</from>
JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('#contact-form').validate({
rules: {
username: {
minlength: 5,
required: true
},
email: {
required: true,
email: true
},
password1: {
minlength: 6,
required: true
},
password2: {
required: true,
minlength: 6,
equalTo: "#password1",
},
address: {
minlength: 5,
required: true,
},
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
I want to RegEx pattern to address like only /-()., these charters are only allowed with alphabets
how do I use pattern RegEx in this?

try this
address: {
minlength: 5,
maxlenght=50,
required: true,
regex: /^[a-zA-Z0-9\s,'-./()]*$/,
},

How to validate only mandatory fields in jQuery validation plugin?

Validate only mandatory fields in jQuery validation plugin: below is my code
<label for="firstName">First Name<span class="required">*</span></label>
<input type="text" id="firstName" class="form-control" placeholder="First Name" name="firstName">
<label for="address1">Address Line 1</label>
<input type="text" id="address1" class="form-control" placeholder="Address Line 1" name="address1">
I want to skip address 1 on form submit

Try setting the required flag to false for address1.
$('#profileDetailsPage').validate({
rules: {
firstName:{
required: true,
textonly: true
},
address1:{
required: false, // don't require this field
textonly: true
}
},
messages: {
firstname: "Please enter your first name",
address1: "Please enter only text"
},
submitHandler: function() {}
});

jQuery Validation form is not Validating and submitting

I've set all rules correctly, yet they seem to be ignored completely when I submit the Form.
Here is my code:
$(document).ready(function() {
$('#formValidation').validate({
rules: {
name: {
required: true,
minlength: 2,
lettersonly: true,
},
email: {
required: true,
minlength: 5,
email: true,
},
feedback: {
required: true,
minWords: 5,
},
}
messages: {
name: {
required: "Please enter your name",
},
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form id="formValidation" onload="validate()">
<p>Name: <br/><input type="text" name="name" /> </p>
<p>Email:<br/><input type="email" name="email" /></p>
<p>Feedback:<br/><input type="text" name="feedback" id="textfield" />
<input type="submit" id="submit" onsubmit="return formValidation()" /> </p>
</form>

So, all you need is the following.
$(document).ready(function () {
$('#formValidation').validate({
rules: {
name: {
required: true,
minlength: 2,
lettersonly:true,
},
email: {
required: true,
minlength: 5,
email:true,
},
feedback: {
required: true,
minWords: 5,
}
},
messages: {
name:{
required:"Please enter your name",
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form id="formValidation" method="post">
<p>Name: <br/><input type="text" name="name" /> </p>
<p>Email:<br/><input type="email" name="email" /></p>
<p>Feedback:<br/><input type="text" name="feedback" id="textfield"/>
<input type="submit" id="submit"/> </p>
</form>
Removed unnecessary/extra ,s from your script.
Remove inline event handlers

Validation plugin files are not working

I am doing my form validation with jquery validation plugin. Everything seems fine but its not working. No message appears. Or may be its due to files that I have included.
files included
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
here is jquery
<script type="text/javascript">
$(function($){
$("#joinform").validate({
rules: {
firstname: {
required: true,
maxlength: 30
},
lastname: {
required: true,
maxlength: 30
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "#password"
}
},
messages: {
firstname: {
required: "Please enter your firstname",
maxlength: "Firstname is too large"
},
lastname: {
required: "Please enter your lastname",
maxlength: "Lastname is too large"
},
email: {
required: "Please enter email address",
email: "Please enter the valid email"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
repassword: {
required: "Please confirm your password",
equalTo:"Passwords should be same"
}
}
});
});
</script>
here is html.
<form role="form" name="joinform" id="joinform" action="" method="post">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" class="form-control" name="firstname" placeholder="First Name" required/>
<input type="text" class="form-control" name="lastname" placeholder="Last Name" required/>
<br/>
<label for="email">Email: </label>
<input type="email" class="form-control" name="email" placeholder="Enter email" required email/>
<br/>
<label for="pwd">Password: </label>
<input type="password" class="form-control" name="password" placeholder="at least 6 characters long" required/>
<label for="repass">Retype-Password:</label>
<input type="password" class="form-control" name="repassword" placeholder="Confirm your password" required/>
<br/>
Already a member?Login<br/>
<br/>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>

When using any jQuery plugin, you must load jQuery first. You are also including the plugin twice. You must not include each plugin more than once... preferably use the latest version.
This is correct...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
Otherwise, use the latest plugin version supported by your version of jQuery...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>

jquery confirm password validation

I am using jquery for form validation. Rest is well except the confirm password field. Even when the same password is typed, the Please enter the same password. is not removed.
My script is:
<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules: {
password: {
required: true, minlength: 5
},
c_password: {
required: true, equalTo: "#password", minlength: 5
},
email: {
required: true, email: true
},
phone: {
required: true, number: true, minlength: 7
},
url: {
url: true
},
description: {
required: true
},
gender: {
required: true
}
},
messages: {
description: "Please enter a short description.",
gender: "Please select your gender."
}
});
});
-->
</script>
And inside the form tag:
<div class="form-row"><span class="label">Password</span><input type="password" name="password" class="required" id="password" /></div>
<div class="form-row"><span class="label">Confirm Password</span><input type="password" name="c_password" id="c_password" /></div>
Any suggestion?
Would be much thankful for the help.

Your fields doesn't have the ID property.
In jQuery the "#password" selector means "the object that has an id property with value 'password'"
Your code should look like this:
<input type="password" name="password" id="password" class="required"/>

<input type="password" id="password" class="nomal required error" value="" name="cpassword">
<input type="password" equalto="#password" class="nomal required error" value="" name="cpassword">

Be sure that your password's input text has id 'password'

rules: {
isn't closed. Put another } after:
messages: {
description: "Please enter a short description.",
gender: "Please select yor gender."
}
This is as well as the answer about the element ID's.

Be sure that no other input with tag id='password' in that same page.

I came across some issues when using camelCase id's for the password inputs. I finnally got it working with different 'name' and 'id'.
<input type="password" id="pass" placeholder="New password" name="newPassword">
<input type="password" id="pass2" placeholder="New password" name="repeatNewPassword">
<input type="email" id="inputNewEmail" name="newEmail" placeholder="New email">
<input type="email" id="repeatNewEmail" name="repeatNewEmail" placeholder="New email>
Then in the JS:
rules: {
newPassword: {
minlength: 6
},
repeatNewPassword: {
minlength: 6,
equalTo: "#pass"
},
newEmail: { email: true},
repeatNewEmail: {email: true, equalTo: '#inputNewEmail'},
}
So refer to the input field by its 'name' but define equalTo deppendency using 'id'. I'm not sure about the camelCase issue, for the email inputs it worked, but exactly same nomenclature with password inputs didn't work, according to my experience

if($("#newpassword").val()!== ($("#conformpassword").val())){
$('#newpasswordId').html('<font color="red">Your password does not match</font>');
$("#newpassword").val('');
$("#conformpassword").val('');
$('#newpassword').css("border", "#FF0000 solid 1px")
$('#conformpassword').css("border", "#FF0000 solid 1px")
$("#newpassword").focus();
return false;
}