I have to use required='' on some fields, and then I use data-parsley-required on others. The parsleyJS is applying to the input fields that have required='' on them. Is there a way I can make the ParsleyJS only work on the fields that have the data-parsley-required on it?
Example:
I have the following fields
<input type="text" id="field1" data-parsley-required="true">
<input type="text" id="field2" required="">
Currently it parsley will try to validate both fields. How do i make it only validate if the field has data-parsley-required="true" on it?
Parsley will turn off HTML5 validations, so it's not clear that this is what you actually want...
If you're sure that's what you want, you could exclude [required] fields:
<form data-parsley-excluded="[type=submit], [type=button], [type=reset], [type=hidden], [required]">
Note that if you have other validations on these required fields, this will turn off those validations as well...
Otherwise, you'll have to tweak the source code directly.
Related
I have a html form full of inputs and I'd like to validate if it has no content using change event. I wanna do something like "when I tab this field, focus it and put a a sign if it be empty".
Try required validation:
<input type='text' required value="some text">
This may be sufficient.
Excuse me for this simple question. I have aJSP in which I have several forms, each of which consist of multiple text boxes which take different types of text (eg. Date, Name, Balance). How to make the user fill the fields and then only submit to the server? Is it possible to use only one js function?
Note: this answer does not use any JSP nor JavaScript, because in HTML5 this is no longer necessary.
You could use HTML5's required attribute on the inputs, and then let the user know the inputs are not correctly filled in via the :invalid CSS pseudo-class. It would look something like this:
HTML:
<form id="myForm" action="#">
<label>Date: <input type="date" name="date" required></label>
<br>
<label>Name: <input type="text" name="firstname" required></label>
<input type="text" name="lastname" required>
<br>
<label>Balance: <input type="number" name="balance" required></label>
<br>
<button>Submit</button>
</form>
CSS:
#myForm input:valid {
background:#AFA;
}
#myForm input:invalid {
background:#FAA;
}
Demo.
Extra info
For a complete list of input types (such as those listed above, but also ones like email or checkbox) see MDN or this interactive page with demos
For more information on cross-browser compatibility of :valid and :invalid, see MDN on :valid and :invalid
Notes
These specific input types will also restrict or simplify the input for users. The number inputs will restrict input to numbers only (it will prevent the submission of the form otherwise), and the date inputs will clarify to the user how the date should be entered. Both will also simplify entering information to these inputs
Note that not all of these are supported by older browsers, which will often default to the plain text input. See caniuse and MDN's list for the full details on browser support.
Never rely on client-side verification only. It's very easy to modify forms on the client's side, which could lead to XSS vulnurabilities. Always verify proper input on the server too.
I am using the nifty parsley js As you can see in the documentation
there is only data-parsley-type="alphanum" which allows numbers and letters. I am trying to create fields that ONLY allow letters.
Anyone know how to do this?
You could use a pattern:
data-parsley-pattern="^[a-zA-Z]+$"
You can use such input validator, in order to obtain an only letter field.
<input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" placeholder="Type something" />
Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?
at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.
I know what the jQuery Validation plugin is. I know the jQuery Unobtrusive Validation library was made by Microsoft and is included in the ASP.NET MVC framework. But I cannot find a single online source that explains what it is. What is the difference between the standard jQuery Validation library and the "unobtrusive" version?
Brad Wilson has a couple great articles on unobtrusive validation and unobtrusive ajax.
It is also shown very nicely in this Pluralsight video in the section on " AJAX and JavaScript".
Basically, it is simply Javascript validation that doesn't pollute your source code with its own validation code. This is done by making use of data- attributes in HTML.
With the unobtrusive way:
You don't have to call the validate() method.
You specify requirements using data attributes (data-val, data-val-required, etc.)
Jquery Validate Example:
<input type="text" name="email" class="required">
<script>
$(function () {
$("form").validate();
});
</script>
Jquery Validate Unobtrusive Example:
<input type="text" name="email" data-val="true"
data-val-required="This field is required.">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul><li style="display:none"></li></ul>
</div>
For clarification, here is a more detailed example demonstrating Form Validation using jQuery Validation Unobtrusive.
Both use the following JavaScript with jQuery:
$("#commentForm").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
alert("This is a valid form!");
// form.submit();
}
});
The main differences between the two plugins are the attributes used for each approach.
jQuery Validation
Simply use the following attributes:
Set required if required
Set type for proper formatting (email, etc.)
Set other attributes such as size (min length, etc.)
Here's the form...
<form id="commentForm">
<label for="form-name">Name (required, at least 2 characters)</label>
<input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
<input type="submit" value="Submit">
</form>
jQuery Validation Unobtrusive
The following data attributes are needed:
data-msg-required="This is required."
data-rule-required="true/false"
Here's the form...
<form id="commentForm">
<label for="form-x-name">Name (required, at least 2 characters)</label>
<input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
<input type="submit" value="Submit">
</form>
Based on either of these examples, if the form fields that are required have been filled, and they meet the additional attribute criteria, then a message will pop up notifying that all form fields are validated. Otherwise, there will be text near the offending form fields that indicates the error.
References:
- jQuery Validation: https://jqueryvalidation.org/documentation/
jQuery Validation Unobtrusive Native is a collection of ASP.Net MVC HTML helper extensions.
These make use of jQuery Validation's native support for validation driven by HTML 5 data attributes.
Microsoft shipped jquery.validate.unobtrusive.js back with MVC 3.
It provided a way to apply data model validations to the client side using a combination of jQuery Validation and HTML 5 data attributes
(that's the "unobtrusive" part).