This question already has answers here:
jQuery Validation multiple selectors for ignore
(4 answers)
Closed 5 years ago.
I have a form with large set of fields that includes both read only and hidden fields. I want to enable validation for hidden field but disable validation for ready only fields
In the new version of jQuery validation plugin by the default validation of hidden fields are ignored. So to enable it I have to use :
$("form[name='Formname']").validate({
ignore: []
});
and it is working fine. But I need to ignore the validation for readonly fields and for that I need to use
$("form[name='Formname']").validate({
ignore: [readonly=readonly]
});
Even if i merge the two,it still doesn't work because than it only ignore readonly but doesn't apply vaildation on hidden field
You have to pass selector to ignore like this
ignore: '[readonly]', // This will select all input with readonly and ignore
Elements to ignore when validating, simply filtering them out.
jQuery's not-method is used, therefore everything that is accepted by
not() can be passed as this option. Inputs of type submit and reset
are always ignored, so are disabled elements.
SNIPPET
$("form[name='Formname']").validate({
ignore: '[readonly]',
rules: {
field: {
required: true
},
field1: {
required: true
}}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<form name="Formname">
<input readonly name="field1">
<input type="text" id="field" name="field">
<input type="submit" value="Validate!">
</form>
Related
I am using jquery validator plugin to validate inputs
liberary url : https://jqueryvalidation.org/
i have al form where input fieds are dynamically generated and each row input names are same
<tr> <td><input type="text" class="form-control username" name="username"/></td> </tr>
when user click on add button then one more row will add
<tr>
<td><input type="text" class="form-control username" name="username"/></td>
</tr>
i have following validation
$validator = $("#myform").validate(
{
rules: {
username: {
required: true,
}
}
}
);
my problem is this code will validate only first row username not dynamically generated field name
before asking question i have researched lots of thread no use.
i ref many links but not helped me much
jQuery Validate multiple fields with the same name
jquery get all input from specific form
jquery validate plugin on dynamic form inputs not working
jQuery Validation plugin doesn't validate dynamically created form elements
jQuery - How to dynamically add a validation rule
When validating an email field [name=bar] in a form #foo, I want to switch validation of that field on and off, in relation to a checkbox.
Reading the docs, github issues and stackoverflow answers, I thought setting data-parsley-required="false" and/or data-parsley-validate="false" would be enough.
But it turns out, that all other constraints, like email, min-lenght, max-length are still validated and the input field still validates to an error condition. I would prefer it to validate to success or not at all.
<form id="foo">
<input name="bar"
maxlength="40"
value=""
class="form-control"
data-parsley-validate="false"
data-parsley-required="false"
type="email"
data-parsley-minlength="5"
data-parsley-trigger="input keyup change"
data-parsley-error-message="something is wrong">
</form>
See https://jsfiddle.net/88obg0sj/9/
So how is it possible to turn off field validation in way, it can be re-activated again?
You should tweak the excluded option, for example by adding ", [data-parsley-validate="false"]" to it.
You can follow this way:-
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();
I am trying to stop a submit button to be clicked multiple times and upload the same item multiple times to MySQL.
Because the validation doesn't work, I can not press the button submit button at all. Which means I can't test the code.
I am running related post as well here, to give you some more information.
What I've got so far, using jQuery validation:
$("#UploadForm").validate({
errorLabelContainer: "#messageBox",
wrapper: "td",
rules: {
auction_description: {
required: true
},
auction_int_postage_type: {
required: true
},
listing_type: {
required: true
}
}
//all your options here
submitHandler:function(form){
$('#submit').attr('disabled','disabled');
}
});
HTML
<form method="post" name="UploadForm" id="UploadForm"
action="upload.php" enctype="multipart/form-data" >
<input style="text-transform:none;" type="text" class="button_date"
name="auction_bin_price" id="auction_bin_price" value="" size="15" />
<input class="button2" style="border-right:none; font-size:13px;"
name="List Item" id="submit" type="submit" value="List Item"/>
</form>
Here is a fiddle that has a working demo of solution to your problem.
jQuery 1.6+
To change the disabled property you should use the .prop() function.
$("#submit").prop('disabled', true);
$("#submit").prop('disabled', false);
jQuery 1.5 and below
The .prop() function doesn't exist, but .attr() does similar:
Set the disabled attribute.
$("#submit").attr('disabled','disabled');
To enable again
$("#submit").removeAttr('disabled');
In any version of jQuery
You can always rely on the actual DOM object and is probably a little faster than the other two options if you are only dealing with one element:
// assuming an event handler thus 'this'
this.disabled = true;
The advantage to using the .prop() or .attr() methods is that you can set the property for a bunch of selected items.
I am trying to do client-side validation using AJAX to check for empty fields on a simple form. If the field is empty, I want to notify the user that this is not valid. The form should not submit if there are any empty fields.
What's the best way to do this?
Ajax is not required to do client-side validation. I can only assumed you're interchanging the term with "jQuery". In that case...
jQuery Validate is, by far, the mostly widely used jQuery validation plugin.
"The plugin is written and maintained by Jörn Zaefferer, a member of
the jQuery team, lead developer on the jQuery UI team and maintainer
of QUnit. It was started back in the early days of jQuery in 2006, and
updated and improved since then."
Here is a working demo...
http://jsfiddle.net/EggSb/
jQuery:
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true,
minlength: 5,
// other rules
},
field2: {
required: true,
email: true,
// other rules
}
}
});
});
HTML:
<form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
There's no need to use AJAX if all you are testing for is empty fields. If you are targeting browsers that support HTML5 forms you can just do:
<input type="text" name="username" required />
If you are required to support other browsers like IE you will need to use JavaScript. Google "JavaScript form validation library" to find examples of JavaScript to do this.
I am having a problem using validate.js
http://docs.jquery.com/Plugins/Validation/validate#toptions
All the inputs work perfect such as <input type="email" class="required" />
my problem is,
I want to show the validation on normal
<input type="text" class="required" /> so if the user selects and leaves the input,
the this field is required is shown.
I have tried both $("#confirm_add").validate(); and
$("#confirm_add").validate({
rules: {
user[first_name]: "required"
}
});
the only way I can achieve this effect is including minlength="2" in the input, but I would prefer not to use that,
any help is well appreciated
As mentioned here, you need to quote field names with brackets in them. If you have this html:
<input type="text" name="user[first_name]" />
You need this in your rules:
...
'user[first_name]': {
required: true
}
...
As to the question of having it immediately show the validation, it just doesn't work that way by default, so you'd have to add code to handle that afterwards, using the valid method:
$('#firstname').blur(function(){
$(this).valid();
});
See it all in action here: http://jsfiddle.net/ryleyb/NVZr8/
Note that if all you are doing is setting required, there's no reason to use the rules object, just set the class="required" in the input.