I need to validate input field, it should be integer(0-100), if max_seat = 5 then min_seat should be less than or equal to max_seats.
<form class="cmxform form-horizontal" id="table_info" name="table_info" method="post" action="">
<input class="span6 " id="max_seat" name="default_seats" type="text" />
<input class="span6 " id="min_seats" name="default_seats" type="text" />
</form>
and the jquery is looking like this, how to create rules in this type validation, thank you
$("#table_info").validate(
{
rules: {
min_range :"required integer",
max_seats:"required integer"
},
messages: {
max_seats: "* Required",
min_range: "* Required",
}
});
This is not how you declare multiple rules. (This shorthand style can only be used with one rule.)
rules: {
min_range :"required integer",
max_seats:"required integer"
}
You must declare each rule separately. And for an integer, you can use the digits method.
Your HTML is also not valid for this plugin...
<input class="span6 " id="max_seat" name="default_seats" type="text" />
<input class="span6 " id="min_seats" name="default_seats" type="text" />
Each field must contain a unique name attribute and you would declare your rules based on that name. (Declare the messages option similarly)
rules: {
min_seats: { // <- this is the NAME attribute of the field, not ID
required: true,
digit: true
},
max_seats: { // <- this is the NAME attribute of the field, not ID
required: true,
digit: true
}
}
To compare the two fields, you must use the .addMethod() method and declare your new custom rule the same as above.
Related
https://codepen.io/joshuajazleung/pen/jGEyNa
<form data-parsley-validate>
<input type="file" name="files" multiple data-parsley-max-files="4">
<button type="submit">submit</button>
</form>
window.Parsley
.addValidator('maxFiles', {
requirementType: 'integer',
validateNumber: function(value, requirement) {
return true;
},
messages: {
en: 'Maximum number of files is 4.',
}
});
The file input is supposed to be invalid all the time because the validator return true (for testing purposes). But when I clicked submit button, the input isn't valid. I am wondering why??
It's because the value of you input is not a valid number (ever) and you only defined validateNumber. You need to define a validateString.
To validate files, inspire yourself from the custom validators example
I am using jQuery validation to validate multiple forms with same id. Each form contains different fields and I want to add these fields validation rules to jQuery validate function. How can I add these rules for multiple forms (every form has the same id)?
Example
Form1
<form id="new-form">
<input type="text" name="name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="submit"/>
</form>
Form 2
<form id="new-form">
<input type="text" name="mobile" value=""/>
<input type="text" name="address" value=""/>
<input type="submit" name="submit" value="submit"/>
</form>
JavaScript function
$('#new-form').validate({
// I want to add rules here for both forms
});
I am using jQuery validation to validate multiple forms with same id
You cannot use the same id multiple times on the same page. It's invalid HTML and it will break your JavaScript. Only the first instance of an id will be considered.
If you change your id into a class, then you can freely use it multiple times, and it's valid HTML.
<form class="new-form">...</form>
<form class="new-form">...</form>
However, the jQuery Validate plugin will still only consider the first instance (a limitation of this particular plugin). The workaround is to use a jQuery .each() together with class naming...
$('.new-form').each(function() { // select every form on the page with class="new-form"
$(this).validate() { // initialize plugin on every selected form
// rules for both forms
});
});
Each form contains different fields and I want to add these fields validation rules to jQuery validate function.
Simply declare all the rules for both forms. The plugin will ignore any field names that do not exist on the form.
$('.new-form').each(function() { // select every form on the page with class="new-form"
$(this).validate() { // initialize plugin on every selected form
rules: {
name: {
required: true
},
email: {
required: true
},
mobile: {
required: true
},
address: {
required: true
}
},
// other options, etc.
});
});
That is not possible reason same id is not working so change id name.then use below code:
$().ready(function() {
// First form validate
$("#commentForm").validate();
// Second form validate
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
}
}messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
}
});
});
I have a form consisting of a couple of dozen labels and textboxes. But for simplicity's sake, let's say I have only six such items:
<div class="price-row">
<span>A-text</span>
<input type="text" id="input-A" name="A" required>
</div>
<div class="price-row">
<span>B-text</span>
<input type="text" id="input-B" name="B" required>
</div>
<div class="price-row">
<span>C-text</span>
<input type="text" id="input-C" name="C" required>
</div>
<div class="price-row">
<span>D-text</span>
<input type="text" id="input-D" name="D" required>
</div>
<div class="price-row">
<span>E-text</span>
<input type="text" id="input-E" name="E" required>
</div>
<div class="price-row">
<span>F-text</span>
<input type="text" id="input-F" name="F" required>
</div>
And the rules are as follows:
If A has a value, then B must also have a value. And vice versa.
If C, D, E or F has a value, then every input has got to have a value.
A value here means "has text of length > 0". But in reality, I also check some validity (is it a number, is it a valid e-mail address, etc.)
I have tried to validate the first set of rules, the ones pertaining to A and B, but this does not work:
$("#myform").validate({
rules: {
A: {
depends: function(element) {
($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
}
}
}
});
My thinking is that the above "depends" statement should make sure that the page only validates if the function called returns True. But I can submit the form even if one of the text areas has text and the other doesn't.
Why is this, and what should I do instead?
Your code...
rules: {
A: {
depends: function(element) {
....
}
}
}
There is no such thing as a depends rule.
depends is a property that goes under an existing rule in order to "apply the rule only in certain conditions".
rules: {
A: {
required: {
depends: function(element) {
// return true or false here
}
}
}
}
Whenever the depends function returns true, the associated required rule is activated.
That being said, the function/logic is flawed...
depends: function(element) {
($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
}
You need a return statement.
You can't use ($("#input-A").val().length > 0) as part of the depends function under required for input A because it will always evaluate to false. It always starts off empty, right? (Besides, it doesn't make sense to change the field's rule based upon the same field's own content... you'd probably never be able to satisfy this rule.)
Try something more like this...
rules: {
A: {
required: {
depends: function(element) {
return $("#input-B").is(':filled');
}
}
},
B: {
required: {
depends: function(element) {
return $("#input-A").is(':filled');
}
}
}
}
depends will return true if B is filled out and activate the required rule on A. The same logic is applied to field B.
Working DEMO: http://jsfiddle.net/t9y2x3jf/
NOTE: You must remove any inline HTML5 required attributes from your input elements, otherwise, these will over-ride your depends logic.
<input type="text" id="input-A" name="A" />
I want to restrict special numbers for input, so far I have restricted just symbols and text:
<input type="text" id="txtPageNumber" class="txtPageNumber" onkeyup="this.value = this.value.replace(/[^0-9\.]/g,'')" value="" />
but I want to let people to enter just special numbers, for example: from 1 to 16...
As you've tagged your question with jQuery, here's how you could use jQuery validation plugin
$("#myform").validate({
rules: {
txtPageNumber: {
required: true,
range: [1,16]
}
}
});
I have a form that will have input fields added dynamically via JavaScript. Because I don't know about all of the fields beforehand, I can't define a range restriction like this:
$("#myform").validate({
rules: {
field: {
required: true,
range: [13, 23]
}
}
});
Source: http://docs.jquery.com/Plugins/Validation/Methods/range#range
For most validation methods, such as required, I have been adding validation method names as classes like this:
<input type="text" name="text_2" class="required">
Is it possible for me to use range in the same way that I've used required above? Or do I need to create a new method with a regular expression?
If your input name is text_2 be sure to update that in your rules like so
$("#myform").validate({
rules: {
text_2: {
required: true,
range: [13, 23]
}
}
});
or just change your input with the required field
<input type="text" name="text_2" class="required" range="13,23" />
The current version of jQuery validate respects the min and max attributes of the element so you can have a non-required input with range restrictions like this:
<input type="text" name="text_2" class="number" min="13" max="23" />