[英]jquery validations are not working when i click on submit button
我寫了一個html表單和jquery來執行驗證。 但是,當我單擊提交按鈕時,沒有任何反應。 我不明白發生了什么,無論表單是否與jquery文件鏈接在一起。 請任何人檢查我的代碼並為我提供幫助。
的index.html
<html>
<head>
<title>validation</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<form action="" method="post" id="reg_form">
<p>Name:</p>
<p><input id="name" name="name" type="text"></p>
<p>What's your name?</p>
<p>Email:</p>
<p><input id="email" name="email" type="text"></p>
<p>Enter mail id</p>
<p>Password:</p>
<p><input id="pass1" name="pass1" type="password"></p>
<p>More than 8 characters</p>
<p>Password:</p>
<p><input id="pass2" name="pass2" type="password"></p>
<p>same as above</p>
<p>phone</p>
<p><input id="phone" name="phone" type="text"></p>
<p>What's your number?</p>
<input id="submit" name="submit" type="submit" value="submit"/>
</form>
</body>
</html>
custom.js
$(document).ready(function(){
var form = $("#reg_form");
var name = $("#name");
var nameDetails = $("#nameDetails");
var email = $("#email");
var emailDetails = $("#emailDetails");
var pass1 = $("#pass1");
var pass2 = $("#pass2");
var pass1Details = $("#pass1Details");
var pass2Details = $("#pass2Details");
var phone = $("#phone");
var phoneDetails = $("#phoneDetails");
var button = $("#submit");
name.blur(validateName);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
phone.blur(validatePhone);
name.keyup(validateName);
email.keyup(validateEmail);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
phone.keyup(validatePhone);
form.submit(function(){
if(validateName() & validateEmail & validatePass1 & validatePass2() & validatePhone()){
return true;
}else{
return false;
}
});
function validateName(){
if(name.val().length<5){
name.addClass("error");
nameDetails.text("Your name should have atleast 5 characters");
nameInfo.addClass("error");
return false;
}else{
name.removeClass("error");
nameDetails.text("Whats your name?");
}
}
function validateEmail(){
var a = $("#email").val();
var regexp = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-za-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(filter.text(a)){
email.removeClass("error");
emailDetails.text("Enter mail id");
emailDetails.removeClass("error");
return true;
}else{
email.addClass("error");
emailDetails.text("Enter valid mail id");
emailDetails.addClass("error");
}
}
function validatePass1(){
if(pass1.val().length<8){
pass1.addClass("error");
pass1Details.text("8 characters or more");
pass1Details.addClass("error");
return false;
}else{
pass1.removeClass("error");
pass1.Details.text("Enter mail id");
pass1.Details.removeClass("error");
return true;
}
}
function validatePass2(){
if(pass2.val().length < 1){
pass2.addClass("error");
pass2Details.text("8 characters or more");
pass2Details.addClass("error");
return false;
}
if(pass1.val()!== pass2.val()){
pass2.addClass("error");
pass2Details.text("8 characters or more");
pass2Details.addClass("error");
return false;
}else{
pass2.removeClass("error");
pass2.Details.text("Same as above");
pass2.Details.removeClass("error");
return true;
}
}
function validatePhone(){
var b = $("#phone").val();
var regexp = /[0-9]{10}/;
if(filter.text(b)){
email.removeClass("error");
emailDetails.text("Enter phone number");
emailDetails.removeClass("error");
return true;
}else{
email.addClass("error");
emailDetails.text("Enter valid phone number");
emailDetails.addClass("error");
}
}
});
使用這樣的語句,
var name = $("#name ").val();
要么
var name = jQuery("#name ").val();
然后嘗試...它將起作用...
嘗試這個
$(document).ready(function(){
var form = $("#reg_form").val();
var name = $("#name").val();
...
});
嘗試這個..
$(document).ready(function(){
var name = $("#name").val();
var nameDetails = $("#nameDetails").val();
var email = $("#email").val();
var emailDetails = $("#emailDetails").val();
var pass1 = $("#pass1").val();
var pass2 = $("#pass2").val();
var pass1Details = $("#pass1Details").val();
var pass2Details = $("#pass2Details").val();
var phone = $("#phone").val();
var phoneDetails = $("#phoneDetails").val();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.