Javascript 表单在正确的电子邮件验证jquery后不会提交_Javascript_Jquery_Forms_Validation_Email

Javascript 表单在正确的电子邮件验证jquery后不会提交

javascript jquery forms validation email

Javascript 表单在正确的电子邮件验证jquery后不会提交,javascript,jquery,forms,validation,email,Javascript,Jquery,Forms,Validation,Email,因此，当没有电子邮件时，我的表单会抛出正确的错误。但是，当一封正确的电子邮件被放到字段中时，它不会提交。我哪里出了问题？谢谢你的建议和帮助 var myEmailRegEx = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; $(document).ready(function(){ $("#submitbutton").click(function(e){ var none_answe

因此，当没有电子邮件时，我的表单会抛出正确的错误。但是，当一封正确的电子邮件被放到字段中时，它不会提交。我哪里出了问题？谢谢你的建议和帮助

var myEmailRegEx = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;


$(document).ready(function(){
    $("#submitbutton").click(function(e){
        var none_answered = true;
        var eMailToTest = $('#email').val();
            if(!myEmailRegEx.test(eMailToTest)) { 
                e.preventDefault();
                none_answered = true;
                $('#email').addClass('error');
                $('#texthere').html("Please provide a correct email");
            } 
           else {
               $('#email').removeClass('error');
               return true;
            }
     });
 });

<style type="text/css">

.error
{
    color:red;
}

#texthere
{
    color:red;
}

</style>

<body>
    <form>  
        <label id="email" class="req"><span>*</span>Email:</label>
        <input id="email" class="req" name="email" value="" type="email"></br>          
        <div id="texthere"></div>

        <input id="submitbutton" type="submit" value="submit" formaction="http://www.utah.edu/">
    </form> 

</body>

var myEmailRegEx=/^（[a-zA-Z0-9.+-]）+\@（[a-zA-Z0-9-]）+\.）+（[a-zA-Z0-9]{2,4}）+$/；
$（文档）.ready（函数（）{
$（“#提交按钮”）。单击（函数（e）{
var none_responsed=true；
var eMailToTest=$（'#email'）.val（）；
如果（！myEmailRegEx.test（eMailToTest））{
e、 预防默认值（）；
没有人回答=正确；
$（'#email'）.addClass（'error'）；
$（'#texthhere'）.html（“请提供正确的电子邮件”）；
} 
否则{
$（'#email'）.removeClass（'error'）；
返回true；
}
});
});
.错误
{
颜色：红色；
}
#文本此处
{
颜色：红色；
}
*电邮：

试着这样做：

$("#submitbutton").click(function (e) {
    e.preventDefault();
    var none_answered = true;
    var eMailToTest = $('#email').val();
    if (!myEmailRegEx.test(eMailToTest)) {
        none_answered = true;
        $('#email').addClass('error');
        $('#texthere').html("Please provide a correct email");
    } else {
        $('#email').removeClass('error');
        $('form').submit();
    }
});

另外，似乎您的

none\u-responsed

变量在这里是多余的。

标签和输入字段有重复的ID。因此，

eMailToTest

的值始终为空

<label for="email" class="req"><span>*</span>Email:</label>

*电子邮件：

演示：

尝试更改标签id

<form action="http://www.utah.edu/">
    <label class="req"><span>*</span>Email:</label> // Here duplicate id removed
    <input id="email" class="req" name="email" value="" type="email">
    </br>
    <div id="texthere"></div>
    <input id="submitbutton" type="submit" value="submit" />
</form>

你犯了一些错误

在表单上使用事件提交（不单击事件）

您在标签和电子邮件上使用了id属性。ID在第页上只能使用一次

var eMailToTest = $('#email').val();

它返回ID为email的第一个元素的值。所以它是一个标签（没有价值）。您需要的是输入元素

这是工作代码

HTML:

此外，无应答变量在这里是多余的

希望这能有所帮助：）

哦，谢谢你的关注！它现在起作用了。谢谢非常感谢你！它帮了大忙！

var eMailToTest = $('#email').val();

<form>  
        <label for="email" class="req"><span>*</span>Email:</label>
        <input id="email" class="req" name="email" value="" type="text"><br>          
        <div id="texthere"></div>

        <input id="submitbutton" type="submit" value="submit" formaction="http://www.utah.edu/">
</form>

var myEmailRegEx = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

(function(){
    $("form").on('submit', function(e){
        var eMailToTest = $('#email').val();
            if(!myEmailRegEx.test(eMailToTest)) { 
                e.preventDefault();
                $('#email').addClass('error');
                $('#texthere').html("Please provide a correct email");
            } else {
                $('#email').removeClass('error');
            }
     });
 })();