I have implemented some validations to a simple login page and applied some jQuery validations on button click but the code isn't working. I tried checking console but it was not giving me any errors. Please see the code for your reference:
Could you guys tell me the error?
<!doctype html>
<html>
<head>
<title>Login Page</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate"></script>
<script>
$(document).ready(function(){
$("#form").validate({
alert("hi");
rules: {
name: {
required: true,
midlength: 5,
},
email: {
required: true,
email: true,
},
password: {
required: true,
midlength: 5,
equalTo: "#verify",
},
}
});
});
</script>
<style>
label{
width: 150px;
display: inline-block;
}
label.error{
color: red,
}
</style>
</head>
<body>
<form id="form">
<label>Name : </label>
<input type="text" name="name" /><br/>
<label>Email : </label>
<input type="text" name="email"/ ><br/>
<label>Password : </label>
<input type="text" name="pass" /><br/>
<label>Verify Password : </label>
<input type="text" name="verify" id="verify" /><br/>
<input type="submit" />
</form>
</body>
</html>
This doesn't look right:
<script type="text/javascript" src="js/jquery.validate"></script>
Try this
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
Make sure the file exists with that filename in the js folder. Check the browser console to see if you get any errors - currently I'd expect your code to say "jquery.validate not found".
there is a comma at end of
password: {
required: true,
midlength: 5,
equalTo: "#verify",
},
that break js execution
Related
I am trying to validate a simple form. But I keep getting this error
Uncaught TypeError: $(...).validate is not a function
Here is my html file with form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cohorts</title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="trunk/dev/validation.js"></script>
<form id="register-form" class="form-horizontal" name="form" ng-submit="addCohort()">
<div class="form-group">
<label class="control-label col-xs-3">Name:</label>
<input name="email" placeholder="Email Address" type="text" ng-model="formCohort.firstname">
<input class = "btn-btn-primary" id="submit-button" type="submit" value="Sigin up">
</div>
</form>
</body>
</html>
Here is my validation.
$(function () {
$("#register-form").validate({
rules:{
email:{
required: true,
email: true
}
}
});
});
Here is the error in my console:
What am I doing wrong?
Thank you!
You should first include the jQuery library
and than your validate plugin
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="trunk/dev/validation.js"></script>
P.S: make sure you have only one validate plugin!
Additionally, I'd suggest you to include your <script> tags right before the closing </body> tag.
<form id="register-form">
<input name="email" placeholder="Email Address" type="text">
<input type="submit" value="Sigin up">
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script>
jQuery(function($) {
$("#register-form").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>
when i submit it directly goes to the targeted page in form action. no validation happens.
My form
<form id="RegisterForm" method="post" action="register.php">
..
..
<input type="submit" value="Register Now" class="button">
</form>
My Ajax code validation.js
$(document).ready(function () {
$('#RegisterForm').validate({
rules: {
name: "required",
surname: "required",
address: "required",
nic: "required",
email: {
required: true,
email: true
},
phone: "required",
gfname: "required",
gsurname: "required",
gaddress: "required",
gphone: "required"
},
messages: {
name: "Please enter your name",
surname: "Please enter Your Surname",
address: "Please enter Address",
nic: "Please enter ID card Number",
email: "Please enter a valid email address"
},
// if success
submitHandler: function (form) {
$.post("register.php",$(form).serialize());
$('#RegisterForm').fadeOut("slow");
}
});
return false;
});
Imported files
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
I'am new to bootstrap and ajax. so in your answers please mention what files i should import to trigger ajax validation.
You could try organizing your script tags like this:
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
However if that does not work could you make sure that all your IDs match those that are in the rules sections. Also have you checked your console for any errors to make sure that javascript isn't throwing anything?
You need to simplify your example as much as you can to find problem.
Example below works fine:
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="application/javascript">
$(function () {
$('#RegisterForm').validate({
rules: {
name: "required"
},
messages: {
name: "Please enter your name"
},
// if success
submitHandler: function (form) {
$.post("index.php", $(form).serialize());
$('#RegisterForm').fadeOut("slow");
}
});
});
</script>
</head>
<body>
<form id="RegisterForm" method="post" action="">
<input type="text" name="name">
<input type="submit" value="Register Now" class="button" name="zzz">
</form>
</body>
</html>
I am using a timepicker to select the time with an interval of 15 minutes. I use the timepicker from this link.
I am unable to add the timepicker to the input text field using the onclick function. Here is some sample code of what I am trying to achieve. Please help me solve this issue.
index.html
<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
.st{}
.et{}
#bod { font-size: small; margin:0px 0px 0px 0px; }
body{font-size:10px;}
......
<div id="bod">
<input type="text" id="timepicker_start1" value="" class="st"/>
<input type="text" id="timepicker_end1" value="" class="et"/>
</div>
<input type="button" id="Add" name="Add" value="Add" onClick="add()" />
<input type="hidden" id="tot" name="tot" value="1"/>
...
The javascript part of the page is:
<script type="text/javascript">
function add(){
var tot=document.getElementById("tot").value;
tot=parseInt(tot,10);
var i=tot+1;
$('#bod').append(i+". ");
var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
$('#bod').append(" ");
$('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
document.getElementById("tot").value=i;
}
$(document).ready(function(e) {
$('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
});
</script>
You got a typo: it's timepicker not timpicker.
Other than that you're good - the script is working - http://jsfiddle.net/FNww8/
I get an error like this:
Uncaught TypeError: Cannot read property 'form' of undefined
Firebug says this line is the culprit:
if($("emailPost2").valid())
Here's all my jQuery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("emailPost2").validate({
rules: {
emailAddress: {
required: true,
email: true
}
}
});
$('#zonePlus').click(function() {
$('#zoneNotif').submit();
});
$('#searchPost').submit(function(event) {
if ($(this).find('#searchBox').val() == '') {
event.preventDefault();
}
});
$("#searchBox").autocomplete({
source: 'php/searchAC.php'
});
$("button, input:submit, input:button, a#jql, input:radio").button();
$('#emailJQButton').live('click',function() {
$("#emailModal").dialog('open');
});
$('#eb1').live('click',function() {
$('#emailPost').submit();
$("#emailModal").dialog('close');
});
$('#eb2').live('click',function() {
if($("emailPost2").valid())
{
$('#emailPost2').submit();
$("#emailModal").dialog('close');
}
});
});
</script>
valid() should return true if it is valid, but I just get the error I mentioned above instead of any results.
Edit: Here's the HTML code for the form:
<div id="emailModal">
<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>
</div>
Looks like the problem is simply that you forgot the # in the id selector:
$("#emailPost2").valid()
(rather than the current $("emailPost2").valid())
Assuming
form id="emailPost2"
you need
if($("#emailPost2").valid())
I wanted to BOLD the # but was not allowed inside the brackets, hence I was 15 seconds slower :(
I have the following code:
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var validator = $("#my-form").bind("invalid-form.validate", function() {
$("#errtxt").html("Please correct the errors shown below:");
$("#errtxt").addClass("error-msg");
}).validate({
success: function(label) {
label.addClass("valid");
},
rules: {
text1: {
required: true
},
text2: {
required: true,
}
},
messages: {
text1: "",
text2: "",
} ,
errorElement: "span"
});
});
</script>
</head>
<body>
<form id="my-form" action="" method="post">
<span class="errtxt"></span>
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<label for="text2">Text 2: </label>
<input type="text" name="text2" id="text2" />
<input type="submit" />
</form>
</body>
</html>
I basically want an empty span on error to display an image. However on success the image should change so it should have a different class.
The problem is my span is getting both classes "error" and "valid" whatever I do. But this is only happening because I have empty messages, if I don't have empty messages the classes seem to get applied as required. For example changing it to this works:
messages: {
text1: " ",
text2: " ",
} ,
However i'd like an empty error span just for my bg image. Is this a bug or something i'm doing wrong, I don't understand the code too much but maybe the way i'm doing this:
success: function(label) {
label.addClass("valid");
},
Could be wrong. If I have to keep using an empty space it's no big deal but it seems like a bug.
Also while we are on the subject is there any easy way to default all field messages to a default of "".
On submit, I want:
- next to each input an empty span with the class error (if the field is empty)
- or the class valid if it passes (if the field has contents).
The problem is the span is getting both classes "error valid" even when the field is empty. But if I have a error message text in it works, but ideally I don't want any error message text. I think it might be a bug. See the most simple example:
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-form").validate({
rules: {
text1: {
required: true
},
},
messages: {
text1: "",
} ,
errorElement: "span",
success: "valid",
});
});
</script>
<style>
span.error{
float:left; width:15px; height:15px;
background:red;
}
span.valid{
display:block; width:15px; height:15px;
background:green;
}
</style>
</head>
<body>
<form id="my-form" action="" method="post">
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<input type="submit" />
</form>
</body>
</html>
You will see this doesn't work. But this works:
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-form").validate({
rules: {
text1: {
required: true
},
},
messages: {
text1: " ",
} ,
errorElement: "span",
success: "valid",
});
});
</script>
<style>
span.error{
float:left; width:15px; height:15px;
background:red;
}
span.valid{
display:block; width:15px; height:15px;
background:green;
}
</style>
</head>
<body>
<form id="my-form" action="" method="post">
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<input type="submit" />
</form>
</body>
</html>
Only difference is having something in the messages texts!
try
$(document).ready(function() {
$("#my-form").validate({
rules: {
text1: {
required: true
}
text2: {
required: true
}
},
messages: {
text1: {
required: "Please fill out text1."
}
text2: {
required: "Please fill out text2."
}
},
errorLabelContainer: ".errtxt",
success: "valid"
});
});
if this works for you, please select the check mark next to my answer. i am trying to get enough reputation to leave comments. thanks!