Question

我编写了一个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");
 }
}

});

Answer 1

使用像这样的语句

var name = $("#name ").val();

或者

var name = jQuery("#name ").val();

然后尝试......它会起作用......

Answer 2

试试这个

$(document).ready(function(){
  var form = $("#reg_form").val();
  var name = $("#name").val();
  ...
});

Answer 3

试试这个..

$(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();
});

单击提交按钮时，jquery验证不起作用

3 个答案: