Different validation scenarios for Parsley - javascript

The project which I working on uses Parsley.js as the validation framework. I have not worked on this framework much so, I am unaware of how to show different error messages when the input is empty and when there is an invalid value entered. For example, if the user doesn't enter any value for a particular field, I want to display "This field is required." And when there is an invalid value, I want to display "Please enter a valid value for this field". This is what I have as far of now.
<input type="text" name="firstName" maxlength="40" required pattern="/^[a-zA-Z ',-]+$/" data-parsley-error-message="This field is required">
Any help is appreciated.

<input type="text" name="firstName" maxlength="40"
required
pattern="/^[a-zA-Z ',-]+$/"
data-parsley-required-message="This field is required."
data-parsley-pattern-message="Please enter a valid value for this field."/>
See http://parsleyjs.org/doc/index.html#ui-for-field for more details

Related

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?
I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

checking condition and displaying two different message using setCustomValidity

I want to check two conditions in the html form text field validation. In the below code it checks and shows whether the phone number entered is in the right format. If it is wrong, it displays a message 'Enter a valid mobile number' as I set in setCustomValidity. But it shows the same message when the field is blank. But I want to it to display a different message like 'Please fill this form' when theis field is blank. Is it possible to do it in with html itself as I have used html validation for all the other fields.
<input name="phno" type="text" size="50" maxlength="10" pattern="[0-9]{10}" oninvalid="this.setCustomValidity('Enter a valid mobile number')"
`oninput=`"setCustomValidity('')" required/></td>
inline conditions of html pattern are in JavaScript so simply add this if (this.value!=''):
<input name="phno" type="text" size="50" maxlength="10" pattern="[0-9]{10}" oninvalid="if (this.value!=''){this.setCustomValidity('Enter a valid mobile number')}" oninput="setCustomValidity('')" required/>

The Validity Popup Won't Go Even After Correct Input

I've used the pattern attribute to check the validity of the input and used setCustomValidity to display a custom invalidity message.
The following code has been used to show the invalidity popup for the invite code field:
<input class = "custom_form_field_input" type="text" name="inviteCode" minlength = "6" required maxlength = "6" value="" required pattern="[0-9a-zA-Z]+" autocomplete="off" oninvalid="setCustomValidity('Please enter your 6 digit Invitation Code')" onchange="try{setCustomValidity('')}catch(e){}"/>
Please find snapshots here:
Invalid Input ||
Valid Input
The problem here is that, the invalidity popup should disappear once the user starts inputting a new value, but this isn't happening.
Please help me out.
P.S. - I'm using Wordpress and I cannot easily use AJAX for validation. I am also not allowed to use plugins. Please answer accordingly.
Use oninput instead of onchange.
<input class = "custom_form_field_input" type="text" name="inviteCode" minlength = "6" required maxlength = "6" value="" required pattern="[0-9a-zA-Z]+" autocomplete="off" oninvalid="setCustomValidity('Please enter your 6 digit Invitation Code')" oninput="try{setCustomValidity('')}catch(e){}"/>
Example:
https://jsfiddle.net/173qpqte/

does jQuery Validation plugin not work with input type number? [duplicate]

I'm trying to setup a "digit" field using the jQuery Validation plugin
The problem is I don't want the digit field to be required, I just want to validate it as digits only, if someone does enter anything into it.
Here is my code, if I remove the "required: true," part, the field no longer throws up an error if I enter text into it and the form gets passed.
$('.js-validate-form').validate({
rules: {
phoneNumber: {
digits: true
}
}
});
And my HTML
<input type="number" name="phone" id="phone" placeholder="Phone (include area code)" value=""/>
Thanks in advance for any help!
This only seems to be a problem with input type="number" fields. It also only works as long as your field name matches your rule declaration, in this case, phoneNumber...
<input type="text" name="phoneNumber" id="phone" placeholder="Phone (include area code)" value=""/>
DEMO: http://jsfiddle.net/L4crh/
However, there are various phone number rules you can use that are already included in this plugin as part of the additional-methods.js file
DEMO 2: http://jsfiddle.net/L4crh/1/
EDIT:
The type="number" bug has reportedly been resolved as of jQuery Validate version 1.13.
https://github.com/jzaefferer/jquery-validation/releases/tag/1.13.0

Is there a way for a form to identify only one required field

For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?
You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.

Categories

Resources