Multiple validation in javascript/jquery/html form - javascript

I am using bootstrap3 form with jquery/javascript to validate input. This was taken from here
Here is part of my form:
<form id="contact-form" action="#" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="sr-only" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge form-control" name="name" id="name" placeholder="Your Name">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="email">Email Address</label>
<div class="controls">
<input type="text" class="input-xlarge form-control" name="email" id="email" placeholder="Email">
Here is the javascript:
<script>
$(document).ready(function(){
jQuery.validator.setDefaults({
errorClass: "help-block"
});
$('#contact-form').validate({
rules: {
name: {
minlength: 3,
regex: "/^[A-Za-z\']*$/",
required: true
},
email: {
required: true,
email: true
},
subject: {
minlength: 2,
required: true
},
message: {
minlength: 2,
maxlength: 400,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready
</script>
The required field and number of digits work wonderfully well. I also intend to add further validation, for example, accept alphabets in name field. I have tried using regex but does not seem to be working.
how to use regex (or multiple) validation in this type of javascript validation ?
how to give appropriate error message when a field has multiple validations (only alphabets and more than 3 characters) ?
I am very new to web development, so these might appear noob questions. Just getting hands on html now. Please guide in right direction.

For email you should add something like this:
$.validator.addMethod("email", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+#[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Invalid email address");
then rules for email should be:
email: "required email",

Related

Validation doesn't ignore field

I'm using the plugin JQuery-Validate. I actually created a form which have the following inputs:
<div class="form-group bmd-form-group">
<label for="operator-password" class="bmd-label-floating"> <?= lang('password') ?> *</label>
<input type="password" class="form-control" id="operator-password" name="password" >
</div>
<div class="form-group bmd-form-group">
<label for="operator-confirm-password" class="bmd-label-floating"> <?= lang('confirm_pwd') ?> *</label>
<input type="password" class="form-control" id="operator-confirm-password" name="confirm_password">
</div>
essentially, I apply the class .ignore dynamically if a certain condition happend, eg:
$('#operator-password, #operator-confirm-password').addClass('ignore');
when I submit the form, I will get below the two inputs:
Field is required!
that's weird 'cause I configured the validate to skip the input with .ignore class:
$('#operator-form').validate({
rules: {
ignore: ".ignore",
password: {
required: true,
minlength: 8
},
confirm_password: {
equalTo: '#password'
}
},
You need to mention ignore outside of rules like following
$('#operator-form').validate({
ignore: ".ignore",
rules: {
password: {
required: true,
minlength: 8
},
confirm_password: {
equalTo: '#password'
}
}
})
https://jsfiddle.net/rL60wes2/

Form validation using Jquery plugin and additional methods

I want to use the jquery plugin for validating my form with letters only in name section. such that when a user enters special characters or numbers it gives an error. Also i want to check the form validation as the users types the information i.e. realtime validation before submitting the form.
//jquery validation
// Wait for the DOM to be ready
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='book']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
fname: {
required: true,
lettersonly: true
},
lname:{
required: true,
lettersonly: true
},
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
// Specify validation error messages
messages: {
fname: {
required:"Please enter your firstname",
lettersonly:"Letters allowed only"
},
lname: {
required:"Please enter your firstname",
lettersonly:"Letters allowed only"
},
email: "Please enter a valid email address"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});
<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>
<form name="book" id="book" action="" method="post">
<div class="row form-group">
<div class="col-md-6 ">
<label class="" for="fname">First Name</label>
<input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
</div>
<div class="col-md-6">
<label class="" for="lname">Last Name</label>
<input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
</div>
</div>
<div class="row form-group">
<div class="col-md-6 ">
<label class="" for="date">Date</label>
<input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
</div>
<div class="col-md-6">
<label class="" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label class="" for="treatment">Service You Want</label>
<select name="treatment" id="treatment" class="form-control">
<option value="">Hair Cut</option>
<option value="">Hair Coloring</option>
<option value="">Perms and Curls</option>
<option value="">Hair Conditioning</option>
<option value="">Manicure</option>
<option value="">Pedicure</option>
<option value="">Nails Extension</option>
<option value="">Nail Design</option>
<option value="">Waxing Eyebrows</option>
<option value="">Waxing Hands/Legs</option>
<option value="">Full Face Waxing</option>
<option value="">Full Body/Body Parts Wax</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label class="" for="note">Notes</label>
<textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
</div>
</div>
</form>
I want to use the jquery plugin for validating my form with letters only in name section. such that when a user enters special characters or numbers it gives an error
var RegEx = /^[a-zA-Z\s]*$/;
if (RegEx.test($('#input').val())) {
}
else {
$('#input').val("");
}
});​````
You have to wrap all the input elements in <form></form> and use jquery Validate plugin. Refer this link: http://jqueryvalidation.org/validate/ for detailed explanation
How about doing something like this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<form id="form">
<label for="name">Name: </label>
<input type="text" name="name">
<div id="error"></div>
</form>
<script>
;(function($){
$.fn.extend({
donetyping: function(callback,timeout){
timeout = timeout || 1e3; // 1 second default timeout
var timeoutReference,
doneTyping = function(el){
if (!timeoutReference) return;
timeoutReference = null;
callback.call(el);
};
return this.each(function(i,el){
var $el = $(el);
// Chrome Fix (Use keyup over keypress to detect backspace)
// thank you #palerdot
$el.is(':input') && $el.on('keyup keypress paste',function(e){
// This catches the backspace button in chrome, but also prevents
// the event from triggering too preemptively. Without this line,
// using tab/shift+tab will make the focused element fire the callback.
if (e.type=='keyup' && e.keyCode!=8) return;
// Check if timeout has been set. If it has, "reset" the clock and
// start over again.
if (timeoutReference) clearTimeout(timeoutReference);
timeoutReference = setTimeout(function(){
// if we made it here, our timeout has elapsed. Fire the
// callback
doneTyping(el);
}, timeout);
}).on('blur',function(){
// If we can, fire the event since we're leaving the field
doneTyping(el);
});
});
}
});
})(jQuery);
function validate(value) {
var regex = /\d/g;
if (regex.test(value)) {
$('#error').text('Only text allowed!');
} else {
$('#error').empty();
}
}
$('input[name=name]').donetyping(function(e){
validate($(this).val());
});
</script>
</body>
</html>
Credits to this https://stackoverflow.com/a/14042239/9379378
//jquery validation booking page
// Wait for the DOM to be ready
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='book']").validate({
//on key up validation
onkeyup: function(element) {
$(element).valid();
},
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
fname: {
required: true,
lettersonly: true
},
lname:{
required: true,
lettersonly: true
},
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
messages: {
fname: {
required:"Please enter your firstname",
lettersonly:"Letters allowed only"
},
lname: {
required:"Please enter your lastname",
lettersonly:"Letters allowed only"
},
email: "Please enter a valid email address"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});

Validation not working using Jquery Validation plugin

I am using the jquery validation plugin for my form validation and form is inside a modal, but it is not working. Does it work with modal? or there might be a problem with my code?
Here is my javascript:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
Here is my html form (I've already added a css for error label):
<script src="{{asset('js/jquery-2.0.0.min.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/form-validation.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/jquery.validate.min.js')}}" type="text/javascript">
</script>
<form method="post" action="{{route('profile.update', ['id'=> Auth::id()])}}" enctype="multipart/form-data" id="gen_form">
{{csrf_field()}}
<h4 class="modal-title" id="myModalLabel"> <b>General Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="lname" value="{{$user->lname}}" />
<br>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">First Name</label>
<input type="text" class="form-control" id="fname" name="fname" value="{{$user->fname}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group label-floating has-success">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location" value="{{$user->location}}" />
</div>
</div>
<h4 class="modal-title" id="myModalLabel"> <b>Contact Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Contact Number</label>
<input type="text" class="form-control" id="contact_no" name="contact_no" value="{{$user->contact_no}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" value="{{$user->email}}" />
<p class="validations">Hello</p>
</div>
</div>
Do anyone here have an idea what is going on?
Your script is invalid.
Perhaps try
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
}
});
});
and see if you have better luck?
I think, you have some syntax errors.
Try to do something like this:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
You are missing a closing curly bracket and a comma at the end of the rules section, right before messages:
[...]
'email': {
email: true
},
}, /* <--- This one */
messages: {
fname: {
[...]

How to integrate ajax responses from backend to jquery validator?

I am getting a json response from my server:
{"success":false,"register_email":"","register_firstname":"","register_lastname":"<p>Please enter last name.<\/p>","register_password":"<p>Please enter your password.<\/p>","register_repeat_password":"<p>Please retype your password.<\/p>","register_about":"<p>Enter atleast 50 characters long.<\/p>"}
Now, I need to show these errors in my html page using jquery validator.
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="register_lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="register_password" name="register_password" placeholder="Password">
</div>
</div>
In case of front-end check, I am successfully using jquery validator.
$('#signupform').validate({
rules: {
register_email: {
required:true,
email:true
},
register_firstname: "required",
register_lastname: "required",
register_password: {
required:true,
minlength:6
},
register_repeat_password: {
required:true,
equalTo: "#register_password"
},
register_about: {
required:true,minlength:50
},
},
messages: {
register_email: "Please Enter your email.",
register_firstname: "Enter your first name",
register_lastname: "Enter your last name.",
register_password: {
required: "Please enter your password.",
minlength: "Your password should be of minimum 8 characters."
},
register_repeat_password: {
required: "Please retype your password",
equalTo: "Your password don't match."
},
register_about: "Please Enter at least 50 characters."
},
errorElement: 'div',
errorClass: 'alert alert-danger fade in',
I want to achieve the same in case of backend check.
I googled, I came to know about remote attribute in jquery validator, but it works for only one field, at a time. I want to integrate backend responses in each and every case.

Jquery slide up function not activating in contact form script

Everything is working on this contact form except for the last bit using the slide up function to replace the contact form with a thank you message and I just can't seem to hack my way to a solution.
You fill out the form, hit submit, the email gets sent, and the loading gif appears, but the slideup animation never happens and the thank you image never shows.
<!--CONTACT PANEL-->
<div id="contact-panel">
<div class="top">: : CONTACT ME : :</div>
<form id="contactform" method="post">
<ol class="forms">
<fieldset>
<label for="name"><input type="text" name="name" id="name" value="" placeholder="Name:" required minlength="2" /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="name" class="error"></label></p>
<fieldset>
<label for="email"><input type="text" name="email" id="email" value="" placeholder="Email:" required /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="email" class="error"></label></p>
<fieldset>
<label for="message"><textarea name="message" id="message" placeholder="Question/Comments:" required ></textarea></label>
</fieldset>
<p style="margin-top: -5px;"><label for="message" class="error"></label></p>
<li class="buttons"><button type="submit" id="submitemail">Send Email »</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
</ol>
</form>
</div>
Here's the JS...
$(document).ready(function () {
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
},
},
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email: "*Please enter a valid email address.",
message: "*Please, say something at least 10 characters long.",
},
submitHandler: function(form) {
$('#submitemail').hide();
$("#contactform li.buttons").append('<img src="media/contact/loading.gif" alt="Loading" id="loading" />');
$.post('code/form-contact/submitcontactform.php',
$('form#contactform').serialize(),
function(data){
$("#contactform").slideUp("normal", function() {
$("#contactform").before('<img src="media/contact/contact_thankyou.png" alt="Thank You" id="thankyou" />');
});
});
},
})
return false;
});
I have tried a lot of different ways but I just don't know enough beyond guessing and trial and error. Any help would be welcomed.
I did some changes in messages json as below:
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email:
{
email: "*Please enter a valid email address.",
required: "Please enter email address."
},
message:
{
minlength: "*Please, say something at least 10 characters long.",
required: "Please enter message"
}
},
to make it work in fiddle, I had to remove post call as jsfiddle doesn't support it:
http://jsfiddle.net/shifatullah/v3dTz/16/

Categories