Jquery validate for same field - javascript

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

Related

How to validate form before submitting using formsy-react-components?

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.

jquery validation ignore and include [duplicate]

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>

Validating individual elements using jQuery Validation

I am using JQuery validation plugin jquery.validate for validating my form inputs in this manner like this:
<form id="loginForm" name="loginForm" action="" method="POST">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" value="Login!" />
</form>
</div>
<script>
$("#loginForm").validate({ rules: { username: "required", password: "required" } });
While above works fine, I also needed input validation for elements which are not inside a form and they are being sent to the server dynamically using jQuery etc. so my question is, is it possible to validate such individual elements which are not inside form elements using jQuery Validation, like these:
<tr>
<td><label>Product Name</label></td>
<td colspan="2">
<select name="prdNme" id="prdNme" placeholder="Enter Product Name..." >
<option data-id='' data-pnme='' data-price='' value=''></option>
</select></td>
</tr>
<tr>
<td><label>Quantity</label></td>
<td colspan="2">
<input type="text" style="width: 80px" placeholder="Quantity" id="qntty" /></td>
</tr>
If yes than how? and if no than how can i validate them without writing my whole new validating functions?
Quote OP:
"... I also needed input validation for elements which are not inside a form ... so my question is, is it possible to validate such individual
elements which are not inside form elements using jQuery Validation"
No. It is not possible to validate any input elements not contained within <form></form> tags using the jQuery Validate plugin.
All input elements must be contained within form tags and .validate() attached to the form element to initialize the plugin. There is no other way. This is by design.
See: documentation...
"Validate forms like you've never been validating before!"
Quote OP:
"if no, then how can I validate them without writing my whole new validating functions?"
Why would you need to re-write anything? Simply wrap your input elements within a set of <form></form> tags.

Form input hints conflicting with validation plugin

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/

jQuery Validation Plugin not validating fields in a hidden div

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(...);

Categories

Resources