I need to find all required fields in given form using jquery. I was using this syntax:
$('input[required],select[required]')
This was doing job, but now I started using jQuery Validation Plugin. As i understood plugin would not add 'required' attribute to field, and thats why above script is failing to find required fields. Is it possible select required field when using jQuery Validation Plugin?
As I understood plugin would not add 'required' attribute to field, and thats why above script is failing to find required fields.
The jQuery Validate plugin does not dynamically add or remove attributes from the input elements. It only adds/removes a class depending on whether the field is valid or invalid.
Is it possible select required field when using jQuery Validation Plugin?
Not directly. There is nothing unique about an input when the field has the "required" rule declared by the plugin's settings.
However, with this plugin, rules can be declared on the fields using several other methods... just two examples follow.
Instead of declaring the required rule via the rules object within .validate(), simply add the HTML5 required attribute to the fields yourself. The jQuery Validate plugin will work by picking up this HTML5 attribute and assigning the required rule to the field for validation.
<input type="text" name="foo" required />
OR
<input type="text" name="foo" required="required" />
and you don't need to specify the element itself in the selector, just the attribute, like this...
$('[required]')
OR
$('[required="required"]')
You can also assign the rule via a class...
<input type="text" name="bar" class="required" />
then you can easily select all elements with this class...
$('.required')
This demo shows three different ways to assign the required rule.
DEMO: jsfiddle.net/fg25jsw3/
Related
How do I clear the userid attribute of a specific input field? Even when I clear the field the userid is not cleared, because I am fetching the data on the basis of the ID in input field of the textbox, it also fetches the data of the userid which is not present in the textbox because it gets stored and is removed only after refresh(f5).
<input id="inputField_0"
type="text"
class="inputClass ui-autocomplete-input"
autocomplete="off"
userid="10018" />
You can leverage jQuery's removeAttr method.
$("#inputField_0").removeAttr("userid");
Or if you need a vanilla JS option, you can leverage the element's removeAttribute method.
document.getElementById("inputField_0").removeAttribute("userid");
You can remove userid attribute from input field using JQuery.
Try the below link.
Visit [https://jsfiddle.net/gmk9zotq/3/]
We are using jQuery Validate Plugin for all client side validations.
Until now, we were using default error message for all the required fields (i.e. 'This field is required'), but now we need to change it to field specific error message. For example, if user doesn't enter first name, the message should be displayed as Please enter first name and so on.
These are the possibilities we have tried:
Using HTML 5 attributes data-rule-required="true" and data-msg-required="Madam/sir, this field is required.". Due to some other restrictions, we have to avoid using HTML 5 attributes.
Providing messages object while validating form:
messages: {
username: {required: "Please enter Username",email: "Enter valid Email"},
password: "Please enter Password"
},
The disadvantage of this method is that we need to modify both html and the javascipt files and the field names must be in sync for proper functining of the plugin.
I am looking for a similar solution to that of HTML 5 attributes - where I can specify a custom attribute to my input fields, the plugin will pick up the message from that field itself.
Something like this:
<input type="text" required errorMessageCustomAttr="Please enter first name" />
I have referred to relevant SO questions, but unable to find any solution. Is there any way to achieve this?
Quote OP:
"I am looking for a similar solution to that of HTML 5 attributes - where I can specify a custom attribute to my input fields, the plugin will pick up the message from that field itself."
The answer is "no", this is not an option of the plugin.
You would use the HTML5 attribute for the custom messages. Since HTML5 validation is dynamically disabled by the jQuery Validate plugin, the HTML5 data attribute simply becomes a custom attribute.
I would like to create the validation for the controls dynamically. I have a page with more than 25 controls, those controls visibilities are based on the category and subcategories. For some of the categories the controls are required and some of them its not required. This is the business logic behind the scene.
So what I am planning here is, based on the categories and sub categories selection I am planning to include a html attribute isMandated=true for all the required fields. And on the onblur event going to validate its value. While clicking the button (while posting the page to server) I am planning to validate all the controls based on the isMandated attribute.
Is this approach is correct and all major browsers will support this kind of attribute addition?
If you want to include additional attributes you need to use the data- prefix. So in your case:
data-isMandated="true"
This is supported in all major browsers. To then grab the data using something like jQuery:
var isMandated = $(selector).attr("data-isMandated");
If you work on asp.net you can use the RequiredFieldValidator on your different control such as the following example :
<tr>
<td>
<asp:RequiredFieldValidator runat=server
ControlToValidate=txtName
ErrorMessage="Identifier is required."> *
</asp:RequiredFieldValidator>
</td>
<td>User Identifier :</td>
<td><input type=text runat=server id=txtName></td>
</tr>
For the required fields you can use ValidationSummary property which display an " * " before required fields.
<asp:ValidationSummary runat=server
headerText="there is error on this page/>
and don't forget the validation method :
public sub OnSubmit(source as Object, e as EventArgs)
if Page.IsValid then
' Some code
end if
end sub
Your page maybe will not be valid with HTML validations, if your attribute is "isMandated". The proper way is to create a custom attribute "data-isMandated". This approach will works on all browsers (I created similar page before and it was work on IE7+, FF, Chrome).
Maybe will be better, to add class to all required fields, instead of attribute isMandated=true and check all fields with this class.
Also, you can use jquery validation - plugin. It include a couple of validations rules, like required fields, min/max values, phone number validation, email validation, etc.
I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?
You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.
The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)
Inside a <form> I want to use multiple Password type fields but.. I want to make some of them not to be remembering the value of it.
Normally i can use autocomplete=off inside <form> tag.
But this affects over every single fields inside.
Edited: Got Simple Solution Now
<input autocomplete="off" ....... />
Yes, you can (set autocomplete="off" on individual inputs).
You can set autocomplete on a single field by using:
#Html.TextBoxFor(x => x.Property, new {autocomplete = "off"})
If you're using DisplayForModel than you will have to create a custom Edit Template.
You can set it on individual fields, but it's a non-standard HTMl extension and will cause your pages to fail validation: Is there a W3C valid way to disable autocomplete in a HTML form?