Question

我有jquery用于验证，它跳过验证并显示成功，但我没有在文本字段中输入任何值。任何可以提供帮助的人都可以。

这是我的jquery。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/zjquery.validate.js">
</script>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js">
</script>

</script>
<style type="text/css">
  label.valid {
    color: green !important; // !important added  
  } 
  label.error { 
    float: none; 
    color: red; 
    padding-left: .5em; 
    vertical-align: top;  
  }

</style>

<script>
  $(document).ready(function() {
    $('#results').hide();
    $("#contactform").validate({
      debug: false,
      rules: {
        fname: "required",
        subject: "required",
        email: "required",
        message: "required",
        email: {
          required: true,
          email: true
        }
      },
      messages: {
        Paymentfrequency: "Select frequency",
        fname: "Type name ",
        subject: "Type surname ",
        email: "invalid email",     
        message: "Select loan type",                
      },
      submitHandler: function(form) {
        $.post('mailmeform.php', $("#contactform").serialize(), function(data) {
          $('#contactform').fadeOut("slow");  
          $('#results').fadeIn(2000);
        });
      }
    });
  });
</script>

下面是HTML

<table name="contacttable" border="0" width="100%">
<form id="contactform" action="mailmeform.php" method = "post">
<table>
  <tr><td><label>Name:</label></td><td><input type = "text" name = "fname"></td></tr>
  <tr><td><label>Subject:</label></td><td><input type = "text" name = "subject"></td></tr>
  <tr><td><label class="required">Email:</label></td><td><input type = "text" name = "email" ></td></tr>
  <tr><td><label>message:</label></td><td><textarea cols = 40 rows=5 name = "message"></textarea></td></tr> 
  <tr><td><input type = "submit" value = "send"></td></tr>
  </h3>
</form><tr>
<td><div id ="results"><p>Thanks We will be back to you soon</p></div></td>
</tr>
</div>
</table>

Answer 1

无效HTML 是验证被破坏的原因。 </h3>内的标记，未关闭标记，流浪</div>和table标记不匹配，但严重错误是您在<form>周围包裹<table>标记的方式。 ..

<table name="contacttable" border="0" width="100%">
    <form id="contactform" action="mailmeform.php" method = "post">
        <table>
            <tr>...</tr>
            <tr>...</tr>
    </h3>
    </form>
        <tr>...</tr>
    </div>
</table>

清理完这个HTML后，jQuery Validate插件工作正常：

DEMO：http://jsfiddle.net/p2kLR/

此外，您已将插件包含两次。删除第二个实例......

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js">

并且你已经包含了两次jQuery，删除旧版本......

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

更像这样：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>

Answer 2

您使用Jquery验证插件Jquery Validate

尝试在demo上添加类：

class="required"
class="required email"

您添加了两次Jquery Validation脚本。删除一个：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js">

Answer 3

点击按钮

尝试表单验证

 $('#submit').click(function(){

//your code

and if true 
$('#results').show();
});

和

$(document).ready(function(){
  $('#results').hide();
});

为什么Jquery跳过验证并显示成功？

3 个答案: