I am using JQuery validation plugin. I want to specify maxlength for one of the fields.It can be specified as below.
rules: {
Message: {
required: false,
maxLength: 200
}
}
But instead of defining the rules externally, i want to specify the rules inside html input code
Similar to :
<input type="text" name="AssistanPhone" value="" class="required" />
In above example "required" is specified through class. Similarly how can i specifiy maxlength which can be recognized by jquery plugin and gives error message if length exceeds?
Thanks!
Not capital L its l
Ex:
$( "#myform" ).validate({
rules: {
field: {
required: true,
maxlength: 200
}
}
});
PLUGIN DEMO
As far as I can see you cannot specify the messages via attributes, but the maxlength can be specified as a attribute
<input type="text" name="AssistanPhone" value="" required maxlength="3" />
Demo: Fiddle
I updated the javascript code of the validator myself (so I'm stuck with my version 1.8.1 now instead of upgrading), but here's what I did (around line 767):
classRules: function(element) {
var rules = {};
var classes = $(element).attr('class');
classes && $.each(classes.split(' '), function() {
if (this in $.validator.classRuleSettings) {
$.extend(rules, $.validator.classRuleSettings[this]);
}
if (this.toLowerCase().lastIndexOf('maxlength-', 0) === 0) { // starts with
var x = parseInt(this.substring(10)); // take number after 'maxlength-'
$.extend(rules, {maxlength: x});
}
});
return rules;
},
I added the extra if-test for "maxlength-", so now I can add a class like "maxlength-10" to limit to 10. Of course I could also add minlength and so on.
$("#FormID").validate({
rules: {
PriorityDDL: {
required: true
},
Title: {
required: true
},
Text: {
required: true,
maxlength: 300
},
date: {
required: true
},
reportfile: {
required: true
}
},
messages: {
PriorityDDL: {
required: "Please select priority"
},
Title: {
required: "Please enter title"
},
Text: {
required: "Please enter message",
maxlength:"maxLength is 300 characters"
},
date: {
required: "Please select date"
},
reportfile: {
required: "Please select file"
}
}
});
Related
I want to customize the validations of my form using the addMethod function with the jQuery validator, but when I tried to add more than one method the validator seems to look only at the first one.
Here is the code:
jQuery.validator.addMethod("name", function(value, element) {
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value);
}, "please enter a valid name");
jQuery.validator.addMethod("surname", function(value, element) {
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}\-?[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}$/.test(value);
}, "please enter a valid surname");
$("#contactform").validate({
rules: {
firstname:{
required: true,
name: true,
minlength: 2,
maxlength: 30
},
lastname:{
required: true,
surname: true,
minlength: 2,
maxlength: 30
}
}
});
The issue is that on the last name I want to be able to add an '-' in case of a combined surname, I tried the regEx and it works exactly as I want to, but even if I call the method 'surname' in the rules of the field, it seems to elaborate the method 'name' anyway!
Thanks in advance for your help, I really don't understand what I'm missing here..
https://jsfiddle.net/2zumkcyg/11/
The issue is with your method name. The prop name inside rules is already a predefined rule inside $.validator like minLength. If you change name to anything but that it will work.
JS
$(document).ready(function(){
$.validator.addMethod("named", function(value, element){
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value);
}, "Please enter a valid name.");
$.validator.addMethod("surname", function(value, element){
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}\-?[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}$/.test(value);
}, "Please enter a valid surname.");
$("#contactform").validate({
rules: {
firstname: {
required: true,
named: true,
minlength: 2,
maxlength: 30
},
lastname:{
required: true,
surname: true,
minlength: 2,
maxlength: 30
}
}
});
});
DEMO
I have the JQuery validations below that just ensure that something is written within the input fields, I also have maxlength in the html.
However, I was hoping someone could shed some light on the situation and inform me on how I can add some type of minlength to the jquery code below so I don't require to do any additional functions?
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
CheckUser(form);
return false;
}
});
Example HTML -
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>
You can use like below:
rules:{
txtusername: {
required: true,
minlength: 3
},
}
I validate my form using jquery validate like this:
$("#formuser").validate({
rules: {
accountname: {
required: true,
minlength: 6
},
T1: {
required: true,
minlength: 6
},
accountpassword1: {
required: true,
minlength: 8
},
accountpassword2: {
required: true,
minlength: 8,
equalTo: "#accountpassword1"
},
},
});
HTML:
<input id="accountpassword1" class="text-input form-control" type="text" name="accountpassword1" size="24" placeholder="password" >
<input class="text-input form-control" type="text" name="accountpassword2" size="24" placeholder="password" >
this worked for me But. I need to check jquery validate when password1 and password 2 not empty. my mean is if password input is empty jquery validate not validate field else validate field password1 and password2.
how do create this?
NOTE:: i need to only check validate accountpassword1 and accountpassword1 with this method.
You can use the depends option like
function isPasswordPresent() {
return $('#accountpassword1').val().length > 0;
}
$("#formuser").validate({
rules: {
accountname: {
required: true,
minlength: 6
},
T1: {
required: true,
minlength: 6
},
accountpassword1: {
//required: true is not required
minlength: {
depends: isPasswordPresent,
param: 8
}
},
accountpassword2: {
required: isPasswordPresent,
minlength: {
depends: isPasswordPresent,
param: 8
},
equalTo: {
depends: isPasswordPresent,
param: "#accountpassword1"
}
},
},
});
Demo: Fiddle
I had the same requirement So I used this code
$.validator.addMethod(
"regex",
function(value, element, regexp){
return this.optional(element) || regexp.test(value);
},
"Please check your input.");
$('#registration').validate({
rules: {
first_name: {
required: true , regex: /([-a-zA-Z0-9]|\0)/
},
last_name: {
required: true , regex: /([-a-zA-Z0-9]|\0)/
}
},
errorPlacement: function(){
return false;
},
submitHandler: function (form){
alert('sucess')
return false;
}
});
its working for me. Hope it helps
My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?
Here is fiddle link http://jsfiddle.net/2L6xT/
BAsically here is my jquery validation code
$(document).ready(function () {
<!-- validation -->
$('#submitDetails').validate({
// 1. validation rules.
rules: {
firstName: {
required: true,
maxlength: 120
},
lastName:{
required: true,
maxlength: 120
},
custom1: {
required: true,
maxlength: 120
},
state: {
required: true
},
custom9: {
required: true
},
email: {
required: true,
email: true
}
},
// 2. Validation fail messages
messages: {
custom9: {
required: "You must agree to the terms of conditions in order to participate."
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "custom9" )
error.appendTo("#error_msg");
else
error.insertAfter(element);
}
});
///execute when submit button is clicked
$("#submit").click(function () {
});
});
In your html, the input element doesnot have name, the validator framework uses name to apply the rules
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First name" />
so along with id add name also(id is not required if it is not used elsewhere)
Demo: Fiddle
I'm using jQuery Validator and I'd like to be able to disable the default focus behavior.
I am including the field names as values directly in the input fields themselves (like what you see in the "search" input at the top right side of Stack Overflow). The problem here, is that when I submit the form and a field is flagged as invalid, it automatically focuses on the field, which removes the field value.
This could be confusing for a user, as they no long know the purpose of that specific field. Is there any way to disable this behavior?
I've included my code below, in case that helps:
$(document).ready(function(){
jQuery.validator.messages.required = "";
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value !== param;
}, "");
$("#quoteForm").validate({
rules: {
firstName: {
required: true,
notEqual: "First name"
},
email: {
required: function(element) {return $("#emailAdd").val() == '';},
notEqual: "Email",
email: false
},
phone: {
required: function(element) {return $("#phoneNum").val() == '';},
notEqual: "Phone",
phoneUS: false
}
}
});
});
I found the answer to this and just wanted to share it here:
I simply needed to use focusInvalid: false.
Use Jeremy's answer like this:
$("#contactForm form").validate({
focusInvalid: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
message: "required"
},
messages: {
name: 'Fill in name',
email: 'Fill in email',
message: 'Fill in message'
},
submitHandler: function(form) {
return SubmitContactForm();
}
});