This question already has answers here:
Validating array inputs using jquery validation plugin
(4 answers)
Closed 8 years ago.
I need to validate the floor fields that mention below.
<form id="test_form" >
<input name="floor[abc]" type="text" class="input_txt_l " value="" />
<input name="floor[cde]" type="text" class="input_txt_l " value="" />
</form>
I tried with jquery validator plug-in.
jQuery("#test_form").validate({
rules: {
'floor[]':{
required:true
}},
messages: {
'floor[]':{
required:"floor is required."
}
}
});
In here validation is not working. but if the floor has no index , It works well. If someone have idea to fix this issue please help me.
There are different ways to solve your problem:
Either you use addClassRules:
// using the class name instead of field name
jQuery.validator.addClassRules("input_txt_l", {
required: true
});
Or you handle each field separately, because in fact they are named different:
jQuery("#test_form").validate({
rules: {
'floor[abc]':{
required:true
},
'floor[cde]':{
required:true
},
}
});
Or you rename your fields:
HTML:
<input name="floor[][abc]" type="text" class="input_txt_l " value="" />
<input name="floor[][cde]" type="text" class="input_txt_l " value="" />
JavaScript:
jQuery("#test_form").validate({
rules: {
'floor[]':{
required:true
}},
});
fiddle is here.
Related
This question already has answers here:
JQuery-Validation - using rules method on selected ID, why does the name attribute have to be present on the element?
(2 answers)
jQuery validation with unknown array key
(3 answers)
jQuery Validate array input element which is created dynamically
(2 answers)
jQuery validate dynamic input array
(2 answers)
Closed 3 years ago.
I am attempting to setup validation for a file upload. I am already using jquery validate for other inputs in my form (not shown here for simplicity), so I wanted to continue to use this method for consistency.
I am struggling getting it to work because the name field in my file input has brackets for an array to upload multiple attachments. Thefore, I am running into one of two issues:
I put in the actual name in the jquery rule uploadedFile[] and then I get an error.
I take the brackets off and just have uploadedFile, but then this field isn't recognized and the validation doesn't work.
The most logical thing to me is to use the id. I cannot find a good method based on everything I have searched.
Is there a way to run this using the id for uploadedFile[] or is there a different, more effective way of doing this?
Input
<input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
JS
$('#shareProjectForm').validate({
ignore: [],
rules: {
uploadedFile: {
required: true,
extension: 'png|jpg|jpeg|pdf|gif'
}
},
messages: {
uploadedFile: {
required: "A file must be uploaded",
extension: "You must choose a file with one of the following formats: .png, .jpg, .jpeg, .pdf or .gif"
}
},
try this:
$("#uploadedFileTest").change(function(){ $("#uploadedFileTest").blur().focus(); });
$.validator.addMethod(
"validate_file_type",
function(val,elem) {
var files = $('#'+elem.id)[0].files;
for(var i=0;i<files.length;i++){
var fname = files[i].name.toLowerCase();
var re = /(\.pdf|\.jpg|\.jpeg)$/i;
if(!re.exec(fname))
{
return false;
}
}
return true;
},
"Please upload pdf or jog or jpeg files"
);
$('#form').validate({
rules: {
"uploadedFile[]": {
required: true,
validate_file_type: true,
}
},
messages: {
"uploadedFile[]": {
required: "A file must be uploaded",
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id="form">
<input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
<input type="submit" />
</form>
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 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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Validate email address in Javascript?
I am just a beginner in jquery.I have used email field in my form. The form shouldn't submit if the email field is empty. I used the following code
if(document.getElementById('emailaddress').value == ''){
alert('Enter the Email Address');
document.getElementById('emailaddress').focus();
return false;
}
How can i check the entered email is a valid one using simple jquery?
Your best bet would be to use the jquery validate plugin.
A live email validation demo can be seen here
Here is some sample code:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script>
$(function () {
$("#myForm").validate({
rules: {
emailaddress : {
required: true,
email: true
}
}
});
});
</script>
<form id="myForm">
Email address: <input type="text" name="emailaddress" id="emailaddress" class="required" >
</form>
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]
}
}
});