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.
Related
I am using following script to bind the parsley to an input field. I am not able to override the minlength message here to show the custom one. It is showing me the parsley's default error message instead. Am i missing anything ? What could be wrong in it.
$("#first-name").parsley({
trigger: null,
required: true,
minlength:2,
pattern: "/^[A-Za-z'-]*$/",
errorsContainer: ".firstNameErrorMessage",
requiredMessage: "This field is required",
patternMessage: "Only letter, apostrophes and dashes allowed",
minlengthMessage: "Min 2 chars required"
});
Just figured out the cause of this issue. There was minlength attribute given in markup, I removed that and now i am able to see the custom message. Even, it is now taking care to show one message at a time according to priority.
Need to take care to avoid using any html type attribute or attribute which is same as parsley's built in validator types in the markup (for ex: type="email", type="number" and minlength/maxlength), while binding the parsley using javascript syntax in the question and aiming to bind parsley after document ready with custom messages.
Otherwise, parsley will bind while dom rendering itself and once bind we cannot override the error message using the syntax in the question to have custom error message as we desire.
I have a checkbox field which determines whether the proceeding client ID field has an attribute of data-validate required:true, or data-validate required:false which drives my forms validation.
<input type="text" name="stID" id="stID" data-validate="required:true" />
Using jquery i can change the requirement in real-time, along with show/hide and add/remove the error classes associated with that field.
$("#input[name='stID']").attr("data-validate","required:false");
var form=$("#standard");
form.validate().resetForm();
The issue lies when someone tries to submit the form, then changes the initial checkbox option (if true, ID isn't required otherwise if false, ID is required).
When this happens, despite the data-validate required:false being set and the error classes being hidden, the validation is still occurring and flagging the stID field.
Does the jquery validator plug in have a cache/array of fields which resulted in errors that it determines on submit and possibly isn't being cleared/reset when the resetForm function on our validation is called?
Found the solution, still needed to clear the data attribute associated with these fields producing errors after changing its requirement. This was done by
$("#stID").removeData();
I'm using Semantic form validation in a project, but I got an issue.
There is a big form with four dynamic fields with lots of rules that is cloned from a hidden template div.
Example:
<form class="big_form">
<div id="template">
name: <input type="text" class="validate">
</div>
<button>More</button>
</form>
Now when click in More, a new field "Name" appears.
My problem is when I try to validate those fields, the validator see the template fields as empty (beacuse it's really empty) and don't procceed with the post.
There is a way to bypass the div "template" and validate only those divs below?
The validator code is like that:
$('.big_form')
.form({
name: {
identifier: 'name',
rules: [
{
type: 'length[14]',
prompt: 'Please fill something'
}
]
},
etc.
Thank you very much.
Regards,
Al
Cited from the home page of Semantic form validation:
A validation object includes a list of form elements, and rules to
validate each against. Fields are matched by either the id tag, name
tag, or the data-validate metadata matching the identifier provided in
the settings object.
So yes you should be able to validate the fields that you wanted to validate as long as you explicitly include them. I don't see why the nameless input field inside div#template is causing a problem as far as validation is concerned.
I have a form, one of the inputs of which is:
echo $this->Form->input('email', array('class'=>'formInputRegular halfTd notRequired', 'id'=>'email', 'default'=>'Email'));
The email field of this particular model isn't required. But when I try to submit the form with that input empty the automatic javascript validation appears asking me to enter something.
There is no rule in the model for this field. It's not required in the database. It may once have been (I don't think so) and I've changed it, but I've since re-baked the code for this particular model/controller so that shouldn't be a problem.
Any one any ideas on why the auto javascript validation is kicking in?
It seems to me that it is caused by HTML 5 required attribute. This is a new feature since CakePHP 2.3. Refer to http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html#html5-required
You can turn this off by adding
'novalidate' => true
to the form.
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)