HTML表单在Chrome上验证,但在Firefox和IE上验证

时间:2015-04-17 14:51:38

标签: javascript jquery html

您好我正在尝试对表单进行简单验证。表单会在Chrome上验证,但不会在Mozilla FirefoxInternet Explorer上验证。

评论表格HTML

<form method="post">
<table class="table-form">
    <tr>
        <td><label for="comment_name">Name<span class="orange">*</span></label></td>
        <td><input type="text" name="name" placeholder="Your full name" id="comment_name"><span class="orange"></span></td>
    </tr>
    <tr>
        <td><label for="comment_email">Email (Optional)</label></td>
        <td><input type="email" name="email" placeholder="neo@example.com" id="comment_email"/><span class="orange"></span></td>
    </tr>
    <tr>
        <td><label for="comment_country">Country (Optional)</label></td>
        <td><input type="text" name="country" placeholder="eg. India" id="comment_country"/><span class="orange"></span></td>
    </tr>
    <tr>
        <td><b>Comment <span class="orange">*</span></b></td>
        <td><textarea textarea id="comment_text_area" name="comment" placeholder="Write your comment here."></textarea><span class="orange"></span></td>
    </tr>
</table>
<input type="button" id="submit-comment" value="Sumbit"/>

</form>

脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('#submit-comment').click(function(){

    $('#comment_name').next().html('');
    $('#comment_email').next().html('');
    $('#comment_text_area').next().html('');

    var comment_name=$('#comment_name').val();
    var comment_email=$('#comment_email').val();
    var comment_country=$('#comment_country').val();
    var comment_text_area=$('#comment_text_area').val();

    var characterReg = /^\s*[a-zA-Z,\s]+\s*$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if(!characterReg.test(comment_name)||name=='') {
      $('#comment_name').next().html('Invalid Name');
    } else if(!emailReg.test(comment_email)) {
      $('#comment_email').next().html('Invalid Email Format.');
    } else if(comment_text_area=='') {
      $('#comment_text_area').next().html('Please enter a comment.');
    } else {
      alert('Validated!');
    }
  });   
});
</script>

我在Internet ExplorerMozilla Firefox上看到验证错误消息“无效名称”。代码显示警报'已验证!'在Goggle Chrome。 有人请告诉我哪里出错了。我使用的是所有浏览器的最新版本。

1 个答案:

答案 0 :(得分:2)

您可能需要尝试从

中删除此条件(名称==&#39;&#39;)
if(!characterReg.test(comment_name)||name=='') {
 $('#comment_name').next().html('Invalid Name');
}

这样的事情

if(!characterReg.test(comment_name)) {
 $('#comment_name').next().html('Invalid Name');
}

变量名在静态网页中返回为空,其中在codepen(CodePen)/ jsfiddle(result)中我们得到一些值