I have the following div block which i'm trying to validate using the jQuery validation plugin
<div class="row" id="signupaddress1" hidden>
<label for="id-31"><span>Address 1:</span><span class="mark">*</span></label>
<input type="text" class="required" id="id-31" name="address1"/>
</div>
Then using
$("#form").validate(...);
to validate the form. But if this div is hidden it appears to ignore the field when validating. The form uses a postcode lookup to populate the address fields and then displays the div when this has been populated but, as a result, if only the postcode is entered the form can be submitted without validating address1 contains anything.
I guess you are using the new validator plugin which ignores hidden fields by default. To overwrite that just use this and it will work.
ignore:""
You can refer to the Github repo for the change Changeset
You are telling jQuery to validate the form but where is your form tag you should do something like this
<form><div class="row" id="signupaddress1" hidden>
<label for="id-31"><span>Address 1:</span><span class="mark">*</span></label>
<input type="text" class="required" id="id-31" name="address1"/></div></form>
than use
$("form").validate(...);
Related
I'm using formsy-react-components to make a form and I want to validate its input fields before submitting the form.
Is there any way to do that using formsy-react-components?
<form onChange={this.validateForm} onValidSubmit={this.handleSubmit} ref='form'>
<Input type='text' value={this.state.id} className='form- control' validations="isNumeric"></Input>
<Input type='text' value={this.state.name} className='form-control' validations="isAlpha"></Input>
</form>
The inputs with errors have the css class has-error which I then style according to my needs.
Now I want to validate form before changing anything in the input fields or submitting the form. Is there any way to do that?
I've tried looking here: https://github.com/christianalfoni/formsy-react/blob/master/examples/custom-validation/app.js.
But I wasn't able to find what I need.
Maybe someone who has already used this library can guide me how to go about this, or how to validate form when mounting the component.
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'm trying to implement client-side validation using built-in validation mechanisms provided by AngularJS.
I've a simple input of type email which must display an error if the email is invalid once the form get submitted using $submitted or once the control has lost focus using $touched.
<form name="form" novalidate>
<div class="form-group">
<label for="input-emailaddress">Adresse email</label>
<input type="email" class="form-control" name="input-emailaddress" placeholder="Entrez votre email" ng-model="user.email" required="required">
<div ng-show="form.$submitted || form.input-emailaddress.$touched">
<div ng-show="form.input-emailaddress.$error.email">Please insert a valid email address.</div>
</div>
</div>
</form>
But there's no error triggered when I type an invalid email address. $submitted works fine cause if I remove every other conditions, the message appears once triggered, but when I need to access a specific field (form.input-emailaddress), validation does not work.
Does anyone could help me figure out why this doesn't work?
As you are accessing JSON object using . at that time you variable shouldn't contain any character like - or shouldn't be started with numeric variable. You should do access form.input-emailaddress like form["input-emailaddress"]
because it contains hyphen in name will not work
Update
As per #SunilD suggestion we could have change name to should not follow in such crieteria you could use cammel case instead of doing this
I have a form that contains an input field for an email address. The form doesn't have a submit button. Instead it has the Stripe checkout.js script which provides a button that triggers a roundtrip to Stripe (to process a credit card) before submitting the form. The checkout.js script allows an optional variable data-email which makes it possible to pass a preset email address to the Stripe checkout form. I'd like to set the data-email variable with the value of the email address input field on my own form.
Here's the form and the script:
<form role="form" class="new_user" id="new_user" action="/users" method="post">
<label for="user_email">Email</label>
<input class="form-control" type="email" value="" name="user[email]" id="user_email" />
<script src="https://checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-email=document.getElementById('user_email').value
data-key="stripe_key"
data-description="Product"
data-amount="500">
</script>
</form>
I know I need to use:
data-email=document.getElementById('user_email').value
But the data-email isn't getting set. Do I need to add an onchange property to the input field? What would that look like? Do I need more than that?
If the user is entering his email on the page, you might as well just update the script as they type:
var stripe = document.getElementById("stripe");
document.getElementById("email").onkeypress = function () {
stripe.setAttribute("data-email", this.value);
}
<input id="email">
<script id="stripe"></script>
If you run the snippet and inspect the input element, then type, you'll see the data-email attribute update for the given stripe script tag. You should be able to adapt this to your form.
I'm building an HTML form that validates with the jQuery validation plugin.
Minimal Working Example on JSFiddle
I'm now trying to add hints to my input boxes so that it's easier for the user to see what to enter as the table length increases.
Note that the 'Email' field is validated with the validation plugin. The problem is that the validation plugin is validating based upon hint-text.
I don't want to manually write a bunch of filters that compare against the hint text, so I was wondering if there was an alternative means of setting the hint-text than manually setting $(elem).val()?
You could use "placeholder" instead of "data-hint".
<input type="text" class="email" placeholder="Email" />
http://jsfiddle.net/yc4ZA/