I am trying to do client-side validation using AJAX to check for empty fields on a simple form. If the field is empty, I want to notify the user that this is not valid. The form should not submit if there are any empty fields.
What's the best way to do this?
Ajax is not required to do client-side validation. I can only assumed you're interchanging the term with "jQuery". In that case...
jQuery Validate is, by far, the mostly widely used jQuery validation plugin.
"The plugin is written and maintained by Jörn Zaefferer, a member of
the jQuery team, lead developer on the jQuery UI team and maintainer
of QUnit. It was started back in the early days of jQuery in 2006, and
updated and improved since then."
Here is a working demo...
http://jsfiddle.net/EggSb/
jQuery:
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true,
minlength: 5,
// other rules
},
field2: {
required: true,
email: true,
// other rules
}
}
});
});
HTML:
<form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
There's no need to use AJAX if all you are testing for is empty fields. If you are targeting browsers that support HTML5 forms you can just do:
<input type="text" name="username" required />
If you are required to support other browsers like IE you will need to use JavaScript. Google "JavaScript form validation library" to find examples of JavaScript to do this.
Related
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>
Title tells the problem shortly, I have a few email fields like so:
Email 1: <input type="email" name="email1" ng-model="emails.email1" />
<br />
Email 2: <input type="email" name="email2" ng-model="emails.email2" />
I am using following css to see the result:
input[type="email"].ng-invalid.ng-dirty {
background-color: #FA787E;
}
The problem is, validation doesn't fire unless I add required attribute. Inputs take classes "ng-valid ng-touched ng-dirty" when I input abc.
I don't want to put required attribute because I want them to be optional and be validated only if a user wants to fill an e-mail address. Is there a workaround for that?
In Angular 1.3 this is better supported. See the following page for details:
http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html#html5-validators-and-parse-errors
You should be able to leverage the native angular validation methods:
For example with a form name of "form"
form.email1.$error.emails.email1
form.email2.$error.emails.email2
And the data methods:
{{!!form.$error.emails.email1}}
{{!!form.$error.emails.email2}}
From there, just mark the fields dirty and your styling should be applied.
Read more
I am having a problem using validate.js
http://docs.jquery.com/Plugins/Validation/validate#toptions
All the inputs work perfect such as <input type="email" class="required" />
my problem is,
I want to show the validation on normal
<input type="text" class="required" /> so if the user selects and leaves the input,
the this field is required is shown.
I have tried both $("#confirm_add").validate(); and
$("#confirm_add").validate({
rules: {
user[first_name]: "required"
}
});
the only way I can achieve this effect is including minlength="2" in the input, but I would prefer not to use that,
any help is well appreciated
As mentioned here, you need to quote field names with brackets in them. If you have this html:
<input type="text" name="user[first_name]" />
You need this in your rules:
...
'user[first_name]': {
required: true
}
...
As to the question of having it immediately show the validation, it just doesn't work that way by default, so you'd have to add code to handle that afterwards, using the valid method:
$('#firstname').blur(function(){
$(this).valid();
});
See it all in action here: http://jsfiddle.net/ryleyb/NVZr8/
Note that if all you are doing is setting required, there's no reason to use the rules object, just set the class="required" in the input.
I would like to validate the form using my custom data attributes but not sure how this is done. I also want to display the error messages in the data attributes if required.
I am looking for the JavaScript which matches the regex values from the data attributes and matches it against the corresponding input values.
I have the following form..
<form id="loginForm" name="loginForm">
<ul>
<li>
<label for="Username">Username:</label>
<input type="email" data-validation-error="Please enter a username" data-validation-use="^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" id="username" name="username" maxlength="254" class="required" />
</li>
<li>
<label for="Password">Password:</label>
<input type="password" data-validation-error="Please enter a password" data-validation-use="^[a-zA-Z]\w{5,12}$" id="password" name="password" value="" maxlength="12" class="required" />
</li>
</ul>
<input type="submit" value="Login" class="button" name="loginBtn" id="loginBtn" />
</form>
If you're developing for modern browsers only, you can use a few nice features for this:
List itemUse input type email for the username field. The browser will take care of the validation.
Use attribute required. The browser won't let the user submit without a value in the field.
Use attribute pattern. The browser won't let the user submit without the value matching the given pattern. Altough, with email type, you could skip the horrible regex matching emails of yours :)
Check out the pattern attribute:
http://www.the-art-of-web.com/html/html5-form-validation/#section_6
Example:
<input type="email" required />
Here you can check out the support for modern form features in the most used browsers:
http://caniuse.com/#feat=forms
There is an ongoing discussion if it should be possible to specify and style the error messages (handled by the browser). As for now, I don't think it's possible to style the validation messages. Maybe it's more user friendly if these messages is equal across all pages?
If you need to support older browsers, you'll have to put javascript event handlers on each field, extract the regex from the data attributes and match it against the value. Keep in mind that client side validation is no substitute for server side validation - it's just for user convenience. Therefore, HTML5 validation could be good enough for those with browsers supporting it - the rest will still have server side validation to rely on, altought the user experience won't be that great.
This example shows how it could be done (I haven't tested this very well :o):
$('form').submit(function(){
var isValid = true;
$(this).find(':input').each(function(){
var regex = new RegExp($(this).attr('data-validation-use'));
if(!regex.exec($(this).val())){
$('.validationError').append($(this).attr('data-validation-error'));
$(this).addClass('invalid');
isValid = false;
}
});
return isValid;
});
jquery validation will be best.
See the demo and code of standard jQuery validation here. jQuery Validation
I am in the midst of trying to come up with the best way for some validation within a generic MVC based XML which outputs the following.
<input name="xxxx" value="xxxx" ValidationType="Email" IsRequired="True" />
Basically if things contain certain elements, we validate it, if it's required than we do, if not, we don't etc etc. I tried some things but it seems the best way to do this would be a the JQuery "contains" method. I also know that that "ValidationType" is not really a valid attribute of input, but the XML outputs it this way. Any feedback would be appreciated. Thanks. I'm trying to do this as non complicated as possible :)
I would recommend using jquery validate plugin. You can validated elements with class-based attributes and add custom validation if need be. for example, should you need an input required. The output would look like this.
<input name="xxxx" value="xxxx" class="required" />
for email validation you can use
<input name="xxxx" value="xxxx" class="required email" />
Then execute the .valid() function to validated