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>
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>
In my form iam using jQuery validation plug-in to do validations to allow only English, but the problem now is the form text field now should allow English and Japanese only, all other characters should be omitted.
i did the validation for English characters but how to do the same for Japanese too. i have no idea how to do this. please help me iam a newbie.
my validation code for English is this :
<style>
#nwsltrsnd label.error {
color:red;
}
#nwsltrsnd input.error {
border:1px solid red;
}
</style>
<script>
$(function() {
$.validator.addMethod("accept", function(value, element, param) {
return value.match(new RegExp("." + param + "$"));
});
$('#nwsltrsnd').validate({
rules: {
name: { required: true, accept: "[a-zA-Z]+" },
email: { required: true, email: true }},
messages: {
name: { required: "Name is required",
accept: "Invalid name! either english/japanese allowed" },
email: { required: "Email is required!" }
} }); });
</script>
you can use a custom validation rule with the regular expression,
Refer below,
Regular Expression for Japanese characters
Also, when I try below it works fine:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<title>Validation Test</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="validate-form">
<table class="table">
<tr>
<td><input type="text" name="first_name" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Validate" /></td>
</tr>
</table>
</form>
<script>
$.validator.addMethod("languageTest", function(value) {
//regEx = '/[一-龠]+|[ぁ-ゔ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+[々〆〤]+/u';
regEx = /[一-龠]+|[ぁ-ゔ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+[々〆〤]+/;
if(!regEx.test(value))
return false;
else if(regEx.test(value))
return true;
}, 'Please enter "anto"!');
$("#validate-form").validate({
rules : {
first_name : {
required : true,
languageTest : true
}
},
messages: {
first_name : {
required : 'Dont Leave it as blank',
languageTest : 'Invalid language'
}
}
});
</script>
<style>
.error{color:red;}
</style>
</body>
</html>
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
I'm looking to validate a URL without requiring the user to enter "http://". How it is in the form below, "http://" must be entered for the form to be submitted. I can't figure out how to do this. Any help would be much appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and a url.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, URL: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
url: true
}
}
});
</script>
</body>
</html>
Edit: Took isherwood's advice:
var txt = $('#website').val();
var http = txt.indexOf('http://');
if (http > -1) {
$('#website').val(txt);
} else {
$('#website').val('http://' + txt);
}
Why not add it to the URL for your users? A URL isn't a URL without a protocol anyway (the exception being protocolless URLs, but they still have '//').
$('#myform').on('submit', function() {
var myURL = 'http://' + $('#field').val();
$('#field').val(myURL);
});
you can use addmethod with REGEX, just add the class from the method to your input
http://jqueryvalidation.org/jQuery.validator.addMethod/
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 :(