I am new to JQuery. I want to do the validation to four text box using jquery.
Coding i have done
<html>
<head>
<link rel="stylesheet" href=".10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery/jquery-1.10.2.js"></script>
<script src="//code.jquery/ui/1.10.4/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<script src="//code.jquery/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>
Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the red color messages , but it is not displaying the proper error messages.
I am new to JQuery. I want to do the validation to four text box using jquery.
Coding i have done
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>
Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the red color messages , but it is not displaying the proper error messages.
Share Improve this question asked Jun 26, 2014 at 11:19 CoolCool 631 gold badge1 silver badge8 bronze badges 2 |5 Answers
Reset to default 11Try this code:
jQuery
$(document).ready(function () {
$('#submit').click(function (e) {
var isValid = true;
$('#firstname,#lastname,#email,#password').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
});
});
Submit Button Code :
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" id="submit" /></div>
You can see a demo of it here.
please replace following code with your code
<html>
<head>
<style type="text/css">
.error
{
border: 1px solid;
background-repeat: no-repeat;
background-position: 10px center;
color: #D8000C;
background-color: #FFBABA;
width: 280px;
height: 16px;
padding: 5px 3px 5px 15px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(function () {
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>
Register here</h1>
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">
First Name</div>
<input type="text" id="firstname" name="firstname" /><br />
<div class="label">
Last Name</div>
<input type="text" id="lastname" name="lastname" /><br />
<div class="label">
Email</div>
<input type="text" id="email" name="email" /><br />
<div class="label">
Password</div>
<input type="password" id="password" name="password" /><br />
<div style="margin-left: 140px;">
<input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>
Try the below code:
`
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<style type="text/css">
.error
{
color:red;
}
</style>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>
`
Thanks!
I thanks to all ,
I have done the same thing in a little different way, but it is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function (e) {
var isValid = true;
$('#name,#college,#state,#country').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
});
});
</script>
</head>
<body>
<div class="label"> Name</div><input type="text" id="name" name="firstname" /><br />
<div class="label">College</div><input type="text" id="college" name="lastname" /><br />
<div class="label">State</div><input type="text" id="state" name="email" /><br />
<div class="label">Country</div><input type="password" id="country" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" id="submit" /></div>
</body>
</html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function() {
$("#myform1").validate({
rules: {
box1: {
required: true,
range: [13, 23]
}
}
});
var rules = {};
$.each(["box1", "box2", "box3", "box4", "box5"], function(i, v) {
rules[v] = {
required: true,
range: [13, 23]
}
})
$("#myform2").validate({
rules: rules
});
});
</script>
</head>
<body>
<form id="myform1" method="post">
<label for="field">Required, minimum 13, maximum 23:</label>
<input type="text" name="box1"
id="var1" value="">
</form>
<br>
<form id="myform2" method="post">
<label for="field">Required, minimum 13, maximum 23:</label>
<input type="text" name="box1"
id="var1" value="">
<input type="text" name="box2" id="var1" value="">
<input type="text" name="box3" id="var1" value="">
<input type="text" name="box4" id="var1" value="">
<input type="text" name="box5" id="var1" value="">
</form>
</body>
runnable.cssis not loading. Did you pull that down from the demo? runnable.com/UZJ24Io3XEw2AABU/… – bloodyKnuckles Commented Jun 26, 2014 at 11:31