I am using Jquery Validate plugin to check the user input
however, i found that the option is not sufficient and i decided to use custom rules
Are there any website provide those rules?
What i would like to check is the format of date and integer only
Thank you
you can customized jQuery validate plugin like this.
jQuery("form#my-form").validate({
rules: {
//input field name "inputName"
//implement your rules here
inputName: {
minlength: 3
}
},
messages: {
inputName: {
required : 'Your customized message'
}
}
});
you can add custom rules by extending the jquery validator
jQuery.validator.addMethod("customdate", function(value, element) {
return this.optional(element) || {your rules}
}, "eg YYYY-MM-DD");
see in here
http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage
For number only, you don't need to write your own rules.It already include the feature,try digits and number
1 $("#form").validate({
rules:{
inputtype:{required:true,digits:true}
},
messages:{
inputtype:{required:"Please provide Number",digits,"Number Only!"}
}
});
2. $("#form").validate({
rules:{
inputtype:{required:true,number:true}
},
messages:{
inputtype:{required:"Please provide Number",number,"Number Only!"}
}
});
Related
I have a Webix for which provides a possibility to add an additional text field that should be validated as well as predefined fields.
Something like next: http://webix.com/snippet/73c90f29
function addFormInput(){
$$("form1").addView({
view:"text",
label:'Should be a number',
name:"text2",
value:"some",
labelPosition:"top"
}, 1);
};
webix.ui({
view:"form",
id:"form1",
elements: [
{
view:"text",
label:'Not empty',
name:"text1",
labelPosition:"top"
},
{cols:[
{
view:"button", type:"iconButton",
label:"Add new", icon:"plus",
click:function(){
addFormInput();
this.disable()
}
}
]}
],
rules:{
text1:webix.rules.isNotEmpty
}
});
But I'm stuck with the adding a validation rule for a new item. How to do that? Is it possible at all? Thanks in advance!
The new item is added in the form hence you can apply the validation rules on it in your form's rules definition as:
rules:{
text1:webix.rules.isNotEmpty,
//text2 : webix.rules.isNotEmpty // webix defined validation rule
text2 : function(value){ // custom validation rule
if (!value) return false;
return true;
}
}
You can apply custom or webix validation rules on the newly item as shown above.
I am using jquery validation plugin. When I was using required( dependency-expression ) i noticed that
required( dependency-expression ) are not working properly. as mentioned that i tried for
$("#flight_availability").validate({
rules: {
Trip: { required: true },
DepartDate: { required : "#OneTrip:checked" },
Origin: { required:"#OriginId:blank" }
},
});
In the above mentioned code the code DepartDate: { required : "#OneTrip:checked" }, works fine but Origin: { required:"#OriginId:blank" } does not work.
Whats wrong with the code? I used firebug. It did not show any errors. even used validation debug option too, but :(
As per OP's comments:
"even if OriginId is empty(blank), it validates it as true"
Yes, that is exactly how you programmed it.
Origin: {
required: "#OriginId:blank"
}
The above code is saying that the Origin field is only required when the #OriginId field is left blank. Using #OriginId:filled, this logic is saying that the Origin field must remain empty if the #OriginId is filled in. If that's not exactly correct, then you can use the :blank selector instead.
http://jsfiddle.net/xMAs5/
If you want the opposite behavior then use the :filled selector instead.
Origin: {
required: "#OriginId:filled"
}
http://jsfiddle.net/xMAs5/1/
Otherwise, here is a demo using a custom method called empty that works as per your comment: "So if OriginId is empty means Origin value (anything) is invalid."
$(document).ready(function () {
$.validator.addMethod('empty', function (value, element) {
return (value === '');
}, "This field must remain empty!");
$("#flight_availability").validate({
rules: {
Trip: {
required: true
},
DepartDate: {
required: "#OneTrip:checked"
},
Origin: {
empty: {
depends: function (element) {
return $("#OriginId").is(":blank")
}
}
}
}
});
});
DEMO: http://jsfiddle.net/Ab8bT/
It might be the jQuery puesdo selector try using :empty instead of :blank.
I have an input box which tests whether the email in the box is a valid one. This is the script:
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
}
});
This tests for the email. I also have this script which would change the color by adding another class to the form.
$("#myform").toggleClass("othercolor");
Im just not sure where to put this code. Sorry for the newby question just new to jQuery. Thanks =D
Here's a demo... (UPDATED)
It looks like you might be using the jQuery validation plugin. Assuming that you are, you just need to initialise the form validation by executing $("#myform").validate() when the page loads (e.g. by putting it calling it from $(document).ready()).
$(document).ready(function(){
$("#myform").validate();
});
If you want to apply a CSS class when the focus leaves the email field, you could do something like this:
var validator = null;
$(document).ready(function(){
validator = $("#myform").validate({
rules: {
cemail: {
required: true,
email: true
}
}
});
$("#cemail").blur(function() {
if (validator.form()) {
$("#myform").addClass("othercolor");
}
else {
$("#myform").removeClass("othercolor");
}
});
});
validator.form() returns true if the form is valid, and false if it isn't. Note that .toggleclass() won't do what you want here; you'll need to add or remove the class based on the return value of validator.form().
why dont you add it into the success callback in jQuery:
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
},
success: function(){
$(this).toggleClass('red');
}
});
The following code results in the following error:
SyntaxError: Unexpected token ).
Any ideas?
$("#signupForm").validate({
rules: {
'entry[first_name]': "required",
'answers[985575][answer]': "required",
'answers[985574][answer]': {
required: true,
phoneUS: true
},
'entry[email]': {
required: true,
email: true
}
}});
The phoneUS is not a standard, built-in rule. So unless you have defined it, it won't work. As explained in the documentation you need to define it. They provide the following method that you need to include in order to define the phoneUS rule:
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
And here's a working live demo.
I'm using the validation plugin for jquery:
http://docs.jquery.com/Plugins/Validation.
I want to know how would I exempt a field to be validated? Currently all fields inside the form are automatically checked.
I am not sure if this will help since the element that I want to exempt is not included (obviously :) )
$("#contactForm").validate({
rules: {
first_name:{required: true,charsonly:true,minlength: 1 },
last_name:{required:true,charsonly:true,minlength: 1 },
birthday:{required:true,min:1,max:31 },
birthmonth:"required",
birthyear:"required",
username: {required: true,minlength:1,maxlength:32,username:true,notChinese:true,noSpecial:true},
password1:{required:true,minlength: 5,maxlength: 10, alphaNum: true },
password2:{required:true,minlength: 5,maxlength: 10, alphaNum: true, equalTo: "#password1"},
currency:"required",
address:{required: true,noSpecial:true,minlength:2},
city:{required: true,noSpecial:true,minlength:2},
state:{noSpecial:true},
countrycode:"required",
zip:{required:true,zipTest:true},
email:{required:true,email: true},
confirmemail:{required: true,equalTo: "#email",email:true},
phone:{required: true,minlength:6,maxlength:20,phoneUS:true},
cellphone:{required: true,minlength:6,maxlength:20,phoneUS:true},
custom06:{acceptIM:true}
} });
Found it.
I used the ignore validation method.
Here's the code
$("#myform").validate({
ignore: ".ignore"
})
It depends on class attribute. See examples:
This field is required and email format: it cannot be empty
input class="required email"
This field is NOT required and email format: it can be empty
input class="email"
This field is NOT required and doesnt have format: it can be empty
input class=""
Are you using some sort of server side technology? The validation library needs to have rules set, and if you are doing this in strictly javaScript (jQuery) it is manual.
UPDATE: You can remove rules with the following: http://docs.jquery.com/Plugins/Validation/rules#.22remove.22rules
Place the following at the end of the body.
$("selector").rules("remove");
You could set your own messages:
$("#contactForm").validate({
rules: {
input1: required,
input2: required,
no-validation: required,
input4: required,
},
messages: {
no-validation: ''
}
});
Just put an empty string for the field you don´t want to show any message for..