jQuery form validate plugin activate

jQuery form validate plugin activate - javascript

I have three forms on my website: register-form, login-form and article-form.
All three forms are validated via the plugin, all inside the one javascript file.
The register-form and login-form's work as expected and actually validate the form, yet the article-form one does not? the same code is used throughout and there are no errors that I can see...
Do the stylesheets need to be ordered in a certain way?
Is there a limit to the number of forms in a certain form validate file?
Article Form - Inside the .js file
//validate insertArticles form
//validate
$(function(){
$('#article-form').validate(
{
rules:{
heading: {
required: true,
maxlength:75,
},
topic: {
required: true,
maxlength: 15,
},
summary: {
maxlength: 100,
},
text: {
required: true
}
}
}); //valdate end
}); //function end
HTML article-form
$(function(){
$('#article-form').validate(
{
rules:{
heading: {
required: true,
maxlength:75,
},
topic: {
required: true,
maxlength: 15,
},
summary: {
maxlength: 100,
},
text: {
required: true
}
}
}); //valdate end
}); //function end
<!--Incude Head-->
<?php require_once '../view/header.php';?>
<body>
<div id="wrapper"><!--wrapper start-->
<!--Include Navbar-->
<?php require_once '../view/navbar.php';?>
<div class="container" id="content"><!--container start-->
<div class="jumbotron"><!--jumbotron start-->
<!--Form 1-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="Question">
<form class="article" id="article-form" method="post" enctype="multipart/form-data">
<ol>
<li>
<label for="heading">Heading</label> <span id="headingMessage"></span>
<input name="heading" id="heading" class="form-control" type="text">
</li>
<li>
<label for="topic">Topic</label> <span id="topicMessage"></span>
<input name="topic" id="topic" class="form-control" type="text" list="football" >
<datalist id="football">
<option value="Scotland"></option>
<option value="England"></option>
<option value="Spain"></option>
</datalist>
</li>
<li>
<label for="summary">Summary</label>
<input name="summary" id="summary" class="form-control">
</li>
<li>
<label for="thumbnail">Thumbnail</label> <span id="thumbnailMessage"></span>
<!-- <input name="thumbnail" id="thumbnail" class="form-control" type="text" required> -->
<input type="file" name="file" id="file">
</li>
<li>
<label for="articleText">Text</label>
</div>
<textarea name="articleText" id="articleText" class="md-textarea form-control"></textarea>
</li>
<li>
<div class="g-recaptcha" data-sitekey="xx-0xitZ7ZeZ"></div>
</li>
</ol>
<input class="btn btn-success" id="formButton" type="submit" name="submit"value="Submit" name="submit">
<input class="btn btn-danger" id="formButton" type="reset" value="Reset">
</form>
<script>
//$("#articleText").jqte();
</script>
<?php require '../controller/NewArticle.php';?>
</div>
</div><!--jumbotron end-->
</div><!--container end-->
<!-- Include Footer -->
<?php require_once '../view/footer.php';?>
</div><!--wrapper end-->
</body>
<script src ="../controller/FormValidate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- jQuery Validate Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script><!--Google API - Captcha -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>
</body>
<script src ="../controller/FormValidate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- jQuery Validate Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script><!--Google API - Captcha -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../controller/FormHelp.js"></script>
<!-- Text editor plugin -->
</html>
For an example, I will include the code from my register form
//validate
$(function(){
$.validator.addMethod('strongPassword', function(value, element) {
return this.optional(element)
|| value.length >= 8
&& /\d/.test(value)
&& /[a-z]/i.test(value)
&& /[A-Z]/i.test(value)
&& /[!\#\#\$\%\^\&\*\(\)\_\+\.\,\;\:]/i.test(value);
}, 'Password not strong enough - include: special character, letters and number')
$('#register-form').validate({
rules:{
email: {
required: true,
email: true
},
password:{
required: true,
strongPassword: true
},
confirmPassword:{
required: true,
equalTo: '#password'
},
firstname: {
required: true,
nowhitespace: true,
lettersonly: true
},
lastname: {
required: true,
nowhitespace: true,
lettersonly: true
},
mobileNumber: {
required: true,
digits: true,
phonesUK: true
},
username:{
required:true
}
},
messages: {
email: {
required: 'Please enter an email address',
email: 'Please enter a <i>valid</i> email address,'
},
mobileNumber:{
required: 'Please enter a mobile number <b>(digits only)</b>',
mobileNumber: "Please enter a <i>valid</i> UK mobile number"
}
}
}); //valdate end
}); //function end

Related

Password change jQuery validation error message does not appear

I face a problem when I enter wrong matching password - the jQuery validation error message not appear.
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#passwordchange').validate({
rules:{
newpass:{
required: true
},
retypepass:{
required:true,
equalto: '#newpassword'
}
},
messages:{
retypepass:{
equalto:"should enter matching pass"
}
}
});
Here is the full code on codepen

AS #Azametzin's comment and the document, You should use equalTo instead of equalto
Syntax
equalTo( other ) Returns: Boolean
Description: Requires the element
to be the same as another one
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#passwordchange').validate({
rules:{
newpass:{
required: true
},
retypepass:{
required:true,
equalTo: '#newpassword'
}
},
messages:{
retypepass:{
equalTo:"should enter matching pass"
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.1/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form method="GET" action="" id="passwordchange">
<div class="form-row">
<div class="form-group row no-gutters col-12">
<label for="newpassword" class="col-md-3">كلمة المرور الجديدة</label>
<div class="col-md-9">
<input type="password" class="form-control" id="newpassword" name="newpass" placeholder="GHIBKL#$*132581">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group row no-gutters col-12">
<label for="retype" class="col-md-3">إعادة كلمة المرور</label>
<div class="col-md-9">
<input type="password" class="form-control" id="retype" name="retypepass" placeholder="GHIBKL#$*132581">
</div>
</div>
</div>
<button type="submit">submit</button>
</form>

New to HTML and jquery. Having trouble getting my error messages to show

I need some help with my JQUERY validation.
I can't seem to get it to show the error messages. I tried to apply the validation to the phone number, the email address, and the first name and last name. I've been at this for about 4 hours now and can't get the errors to show. I feel like i'm missing something really simple.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#info4all").validate({
rules: {
Name : {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
},
messages : {
Name: {
minlength: "Name should be at least 3 characters"
},
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
email: {
email: "The email should be in the format: abc#domain.tld"
}
}
});
})
</script>
<title>Contact US</title>
<link rel="stylesheet" type="text/css" href ="stylerules.css">
<meta charset=ntf-8">
</head>
<body>
<nav>
<center><table class= "menu">
<tr>
<td><button>Home</button></td>
<td><button>AboutUs</button></td>
<td><button>ContactUs</button></td>
<td><button>FAQ</button></td>
<td><button>Homepage</button></td>
</tr>
</center></table>
</nav>
<div id="container" class="centertext">
<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>
<nav>
</nav>
<div id ="left">
.
</div>
<div id="main">
<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>
.
</div>
</body>
<footer>
<p><center>Home</p>
Learn More About Us
Faqs
More Information
Welcome Page
</a></center></p>
<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>
<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>
<form id="info4all"First name & Last Name:<br>
<input type="text" name="Name"><br>
Phone Number:<br>
<input type="tel" name="PhoneNumber">
<br> Email address:<br>
<input type="Email" name="Email">
<br> Date:<br>
<br><input type="Date" name="Date"></br>
<br>When should we contact you?</br>
<input type="radio" name="Selection" value="Dates" checked> Morning<br>
<input type="radio" name="Selection" value="Dates"> Afternoon<br>
<input type="radio" name="Selection" value="Dates"> Weekend</br>
<br>What can we help you with?
<br />
<input type="checkbox" name="Information" value="Information" />Information
<br />
<input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
<br />
<input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
<br />
<input type="checkbox" name="Other" value="Other" />Other..
</br>
<br>Choose how you wish us to contact you</br><select>
<option value="Telephome">Landline</option>
<option value="Email">Email</option>
<option value="Call">Cell</option>
<option value="In Person">In Person</option>
</select>
</br>
<br><button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button></br>
</form>
<br></table>
</footer>
<html>

Please check your javascript parenthesis. It looks like you missed some. It should be like this-
$("#info4all").validate({
rules: {
Name: {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
},
messages: {
Name: {
minlength: "Name should be at least 3 characters"
},
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
email: {
email: "The email should be in the format: abc#domain.tld"
}
}
}
});
See couple of extra bracket before ending the script?
Check the JSFiddle too
https://jsfiddle.net/ashhaq12345/rbnztvx0/7/

this do the trick for me, your form was malformed, and you missed bracket in script
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#info4all").validate({
rules: {
Name : {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
}
},
messages : {
Name: "Name should be at least 3 characters",
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
Email: {
email: "The email should be in the format: abc#domain.tld"
}
}
})
})
</script>
<title>Contact US</title>
<link rel="stylesheet" type="text/css" href ="stylerules.css">
<meta charset="utf-8">
<meta name="keywords" content ="Contact Us, Staff">
<meta name="descrtiption" content="Looking to talk to us personally. Contact us Here.."'>
<meta name="author" content="Michael Cortez">
</head>
<body>
<nav>
<center><table class= "menu">
<tr>
<td><button>Home</button></td>
<td><button>AboutUs</button></td>
<td><button>ContactUs</button></td>
<td><button>FAQ</button></td>
<td><button>Homepage</button></td>
</tr>
</center></table>
</nav>
<div id="container" class="centertext">
<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>
<nav>
</nav>
<div id ="left">
.
</div>
<div id="main">
<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>
.
</div>
</body>
<footer>
<p><center>Home</p>
Learn More About Us
Faqs
More Information
Welcome Page
</a></center></p>
<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>
<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>
<form id="info4all" name="info4all">
First name & Last Name:<br>
<input type="text" name="Name" required /><br>
Phone Number:<br>
<input type="tel" name="PhoneNumber" required />
<br> Email address:<br>
<input type="email" name="Email" required />
<br> Date:<br>
<br><input type="Date" name="Date"></br>
<br>When should we contact you?</br>
<input type="radio" name="Selection" value="Dates" checked> Morning<br>
<input type="radio" name="Selection" value="Dates"> Afternoon<br>
<input type="radio" name="Selection" value="Dates"> Weekend</br>
<br>What can we help you with?
<br />
<input type="checkbox" name="Information" value="Information" />Information
<br />
<input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
<br />
<input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
<br />
<input type="checkbox" name="Other" value="Other" />Other..
</br>
<br>Choose how you wish us to contact you</br><select>
<option value="Telephome">Landline</option>
<option value="Email">Email</option>
<option value="Call">Cell</option>
<option value="In Person">In Person</option>
</select>
</br>
<br><button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button></br>
</form>
<br></table>
</footer>
<html>

Try this code i've fixed few bugs in HTML tags and corrected JQuery parenthesis. Also added error class to show red color on each error message in validation function.
$("#info4all").validate({
rules: {
Name : {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
}
},
messages : {
Name: {
minlength: "Name should be at least 3 characters"
},
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
email: {
email: "The email should be in the format: abc#domain.tld"
}
},
errorClass: 'invalidField',
errorPlacement: function(error, element) {
error.css('color', 'red');
if(element.is(":radio"))
{
error.appendTo(element.parents('.container'));
}else{
error.insertAfter(element);
}
},
errorElement: "span",
submitHandler: function(form) {
}
});
});
Find the complete fixed code through the below link.
https://jsfiddle.net/RamshaS/2w85Lxnz/1/
BTW the form is working perfectly fine now!
Do not forget to add this and this jquery validation plugin at the end of html page.
Hope this answer helps you

How to reset Jquery remote validation

I am very new to Javascript and all. I am working on a registration page right now. I used a template given by my friends and I am trying to make it work with Laravel 5.3.
What I am trying to achieve here is: to validate if the email has already in the database. Now the validation works. It tells if the email exists or not. But once done that, no matter how user changes email input, it always show that the email has been taken.
var form = $(".form-signup");
$('#submit-form').click(function(e) {
form.validate({
rules: {
name: {
required: true,
minlength: 3
},
email: {
required: true,
email: true,
remote: {
url: "/check/",
type: "get"
}
},
password: {
required: true,
minlength: 6,
maxlength: 16
},
password2: {
required: true,
minlength: 6,
maxlength: 16,
equalTo: '#password'
},
terms: {
required: true
}
},
messages: {
name: {
required: 'Enter your first name',
minlength: 'Enter at least 3 characters or more'
},
email: {
required: 'Enter email address',
email: 'Enter a valid email address',
remote: 'Email has been taken'
},
password: {
required: 'Write your password',
minlength: 'Minimum 6 characters',
maxlength: 'Maximum 16 characters'
},
password2: {
required: 'Write your password',
minlength: 'Minimum 6 characters',
maxlength: 'Maximum 16 characters',
equalTo: '2 passwords must be the same'
},
terms: {
required: 'You must agree with terms'
}
},
errorPlacement: function(error, element) {
console.log(element);
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element);
}
}
});
e.preventDefault();
if (form.valid()) {
$(this).addClass('ladda-button');
var l = Ladda.create(this);
l.start();
setTimeout(function() {
//AJAX added.
var formData = {
_token:$(this).data('token'),
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val(),
password_confirmation: $('#password2').val()
};
$.ajax({
type: 'POST',
url: '/register',
beforeSend: function (xhr) {
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data: formData,
dataType: 'json',
statusCode: {
200: function (data) {
console.log('success');
console.log(data);
},
500: function (data) {
console.log(data);
}
}
});
}, 2000);
} else {
alert('not valid');
}
});
}
Here is my front end
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="" name="description" />
<meta content="themes-lab" name="author" />
<meta name="csrf_token" content="{{ csrf_token() }}" />
<link rel="shortcut icon" href="{{asset('admin_assets/images/favicon.png')}}">
<link href="{{asset('admin_assets/css/style.css')}}" rel="stylesheet">
<link href="{{asset('admin_assets/css/ui.css')}}" rel="stylesheet">
<link href="{{asset('admin_assets/plugins/icheck/skins/all.css')}}" rel="stylesheet"/>
<link href="{{asset('admin_assets/plugins/bootstrap-loading/lada.min.css')}}" rel="stylesheet">
</head>
<body class="account separate-inputs boxed" data-page="signup">
<!-- BEGIN LOGIN BOX -->
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3">
<div class="account-wall">
<i class="user-img icons-faces-users-03"></i>
<form class="form-signup" role="form">
<div class="append-icon">
<input type="text" name="name" id="name" class="form-control form-white name" placeholder="Name" required autofocus>
<i class="icon-user"></i>
</div>
<div class="append-icon">
<input type="email" name="email" id="email" class="form-control form-white email" placeholder="Email" required>
<i class="icon-envelope"></i>
</div>
<div class="append-icon">
<input type="password" name="password" id="password" class="form-control form-white password" placeholder="Password" required>
<i class="icon-lock"></i>
</div>
<div class="append-icon m-b-20">
<input type="password" name="password2" id="password2" class="form-control form-white password2" placeholder="Repeat Password" required>
<i class="icon-lock"></i>
</div>
<div class="terms option-group">
<label for="terms" class="m-t-10">
<input type="checkbox" name="terms" id="terms" data-checkbox="icheckbox_square-blue" required/>
I agree with terms and conditions
</label>
</div>
<button type="submit" id="submit-form" class="btn btn-lg btn-dark m-t-20" data-style="expand-left">Register</button>
<div class="clearfix">
<p class="pull-right m-t-20">Already have an account? Sign In</p>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END LOCKSCREEN BOX -->
<script src="{{asset('admin_assets/plugins/jquery/jquery-1.11.1.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/jquery/jquery-migrate-1.2.1.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/gsap/main-gsap.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/icheck/icheck.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/backstretch/backstretch.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/bootstrap-loading/lada.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/jquery-validation/additional-methods.min.js')}}"></script>
<script src="{{asset('admin_assets/js/plugins.js')}}"></script>
<script src="{{asset('admin_assets/js/pages/login-v1.js')}}"></script>
</body>
</html>
So basically, once a user input a used email and receives error message, they won't be able to proceed and the button will keep spinning.
Screenshot on the problem
Can any one suggests any possible solutions? It will be great to fix this problem. Thanks!

Yay, I finally figured out myself after plenty of researching.
The reason being, jQuery validation does NOT wait for remote response. That is why the program runs even if a email is already taken.
To solve this, just simply add
async: false
in the remote. and it will work just fine!

Jquery Plugin not validating a form

I am using Jquery Plugin to validate an Edit form.The validation works fine with the Create Form but it does not work with the Edit form.
My HTML is
<body>
<div class="container">
<h1 class="col-sm-offset-2">Edit Provider Details:</h1>
<br />
<form class="form-horizontal" role="form" id="EditProviderDetailsForm" method="post">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value:FirstName">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data- bind="value:ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" maxlength="13">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS: </label>
<div class="col-sm-6">
<input type="text" class="form-control" data- bind="value:ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Update" class="btn btn-primary col-sm-1 col- sm-offset-4">Update</button>
<button type="button" id="Cancel" class="btn btn-primary col-sm- 1">Reset</button>
</div>
</form>
</div>
</body>
The JavaScript is
$(document).ready(function () {
jQuery.validator.addMethod("AcceptEmail", function (value, element) {
return this.optional(element) || /^([\w\d\-\.]+)#{1}(([\w\d\-]{1,67})| ([\w\d\-]+\.[\w\d\-]{1,67}))\.(([a-zA-Z\d]{2,4})(\.[a-zA-Z\d] {2})?)$/.test(value);
});
$("#EditProviderDetailsForm").validate({
onfocusout: function (element, event) {
this.element(element);
},
onkeyup: function (element, event) {
if (event.which === 9 && this.elementValue(element) === '') {
return;
} else if (element.name in this.submitted) {
this.element(element);
}
},
rules:
{
FirstName: { required: true, minlength: 2, maxlength: 20 },
ContactNumber: { required: true, minlength: 10, maxlength: 10 },
ContactEmail: { required: true, AcceptEmail: true }
},
messages: {
FirstName: {
required: "Please enter your first name",
minlength: "Minimum 2 characters required",
maxlength: "Maximum 20 characters allowed"
},
ContactNumber: {
required: "Please enter your Contact Number",
minlength: "Enter a 10 digit contact number",
maxlength: "Enter a 10 digit contact number"
},
ContactEmail: {
required: "Please enter your Email Address",
AcceptEmail: "Please enter a valid email ID"
}
}
});
var Provider = {
SpecializationArray: ko.observableArray(Specialities),
ProviderID: ko.observable(Edit_data.ProviderID),
FirstName: ko.observable(Edit_data.FirstName),
ContactNumber: ko.observable(Edit_data.ContactNumber),
ContactEmail: ko.observable(Edit_data.ContactEmail)
}
ko.applyBindings(Provider);
});
My Scripts are getting loaded in _Layout page in the Shared folder of MVC.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../Content/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../../Content/bootstrap.min.css" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript" src="../../Scripts/jquery-2.1.3.min.js"> </script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.11.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-3.2.0.js"></script>
</head>
I am at a loss here.Please guide me in the right direction.There are no errors in the Console.

You've missed one of the basics unfortunately - jQuery Validate requires every input to have a name attribute. Simply copy all your id attributes to the name and your code will work.
This is described in the wiki for the library. Also in the documentation:
The name attribute is '''required''' for input elements, the
validation plugin doesn't work without it. Usually name and id
attributes should have the same value.

Simple jquery validation - custom position error message placement

I am using jquery validate plugin to validate number in a form , how can i place the returned error message under the input button , i am unable to achieve,
Here is my image with the issue and what i need,pls check - http://i.imgur.com/Gt5aNxs.png
Please suggest me how to put the error message in a custom Div under the button instead of default underneath.
Here is my code:
<section id="contact" class="content">
<div class="container">
<h2>Contact Form Demo</h2>
<div class="row">
<div class="span12 contact-form">
<form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form">
<!--<?php $formKey->outputKey(); ?> -->
<fieldset>
<div class="control-group">
<label class="control-label" for="inputPhone">Phone</label>
<div class="controls">
<input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country & area code">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
</div>
<div >place here</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
// contact form validation
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
minlength: 11,
required: false,
number: true
},
subject: {
minlength: 3,
required: true
},
message: {
minlength: 20,
required: true
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
// contact form submission, clear fields, return message,script no shown here
</script>

All you need to do is specify the errorLabelContainer in your options and specify the div you want the errors to go into:
$('#contact-form').validate({
//all your other options here
errorLabelContainer: '#errors'
});
Then just make sure you specify that your place here div has the id errors like this:
<div id="errors"></div>
See a working example here: http://jsfiddle.net/ryleyb/aaEFQ/ (note that I also specified the wrapper option, which you'll probably want if there are multiple errors).

errorPlacement: function(error, element) {
if((element.attr('name') === 'color[]')){
error.appendTo("div#errors");
}
else if(element.attr('name') === 'font[]' ){
error.appendTo("#font-error");
}
else{
element.before(error);
}
}

Develop Reference

JavaScript is the programming language of the Web.

jQuery form validate plugin activate - javascript

Related

Password change jQuery validation error message does not appear

New to HTML and jquery. Having trouble getting my error messages to show

How to reset Jquery remote validation

Jquery Plugin not validating a form

Simple jquery validation - custom position error message placement

Categories

Resources