0

我有我用来验证的 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>
4

3 回答 3

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 插件就可以正常工作了：

演示：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>
于 2013-03-04T16:13:52.883 回答
0

您使用 Jquery Validate 插件Jquery Validate

只需尝试在演示中添加类：

class="required"
class="required email"

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

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js">
于 2013-03-04T12:58:03.017 回答
-1

在按钮单击时尝试表单验证

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

//your code

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

和

$(document).ready(function(){
  $('#results').hide();
});
于 2013-03-04T13:16:23.163 回答