jQuery中输入无效时，表单错误地显示成功警报框答案

【问题标题】：Form shows mistakenly the success alert box when it has invalid input in jQueryjQuery中输入无效时，表单错误地显示成功警报框
【发布时间】：2011-10-31 00:06:00
【问题描述】：

在下面的脚本中，我检查输入的电子邮件是否有效。它不是最好的正则表达式，但现在还可以。同样，目前我没有对输入进行任何服务器端检查。仅使用此脚本。

我有这个问题：
当电子邮件有效时，在我输入无效电子邮件后，我首先收到您的电子邮件格式无效，然后我们启动时会通知您。谢谢！ 提醒。电子邮件也被发送。如何解决这个问题？

谢谢

这是我的表格

<form id="myform" action="" method="POST">
                <input id="subscribe" name="subscribe" class="subscribe floatLeft" type="text">
                <button id="signUp" class="signUp floatRight" ><intro>notify!</intro></button>              
                <div class="clear">&nbsp;</div>
</form>

这是脚本

var signUp = function(inputEmail) {
    var isValid = true;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if (!emailReg.test(inputEmail)) {
        isValid = false;
        alert('Your email is not in valid format');
    }



$("#myform").submit(function(event) {
    event.preventDefault();
    if (!isValid) {
        return false;
    } else {
        $.post('mailme.php', $("#myform").serialize(), function(data) {
            alert('You will be notified when we launch. Thank you!');

        });
        return false;
    }
});

};

【问题讨论】：

这会有所帮助：stackoverflow.com/questions/7539752/…
@asotshia 显示您的 HTML，从您调用 signUp 的位置。
您使用 Darhazer 提出的方法和/或您在 $(document).ready() 中使用我的答案。

标签： javascript jquery

【解决方案1】：

您需要 onsubmit 事件返回 false；无论如何，您都需要绑定提交事件并在那里进行 isValid 检查；

$("#myform").submit(function(event){
  event.preventDefault();
  if(!isValid){
  return false;
 }else{
  $.post(...)
  return false;
 }
});

--编辑-- 忘记返回 false/event.preventDefault；但是就像我说的，无论如何都需要绑定提交事件

--编辑2--

function validEmail(email){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return email.test(emailReg)
}
$(document).ready(function(){
  $("#myform").bind({
    submit: function(e){
     e.preventDefault();
     if(validEmail($("#myform").find("#subscribe").val()){
       $.post(...)
          alert("You will be notified");
         return false;
     }
     else {
        alert("Invalid email");
        return false;
     }

   });

}); }

【讨论】：

感谢您的建议。我设法防止重新加载。但是，我更新了我的问题，如果您能看到它，我将不胜感激。
你更新它的方式应该可以工作，但这有点麻烦......，你是把 onsubmit = "signUp(this.elements[0])" 或作为行动或类似的东西?如果您只在 document.ready 上绑定提交事件并在那里进行检查，我想就足够了。我会在我的答案中提出代码建议
仍然不确定你在哪里调用它。您需要获取电子邮件值的地方，您也需要在提交事件中使用它。我的意思是当用户在提交时按下
:) 如果您使用，请执行一些 console.log/alert。检查正在使用该功能验证的电子邮件值。还使用#subscribe 编辑和更改了#myInput 以匹配您的html

【解决方案2】：

您需要在emailReg 测试中使用return false 或event.preventDefault()。

【讨论】：

我在your email is not... 之后尝试了return false;，但没有结果
你需要onsubmit事件返回false