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

【问题标题】：Form wont submit after correct email validation jquery正确的电子邮件验证jquery后表单不会提交
【发布时间】：2014-04-01 06:05:46
【问题描述】：

因此，当没有提供电子邮件时，我的表单会抛出正确的错误。但是，当将正确的电子邮件放入该字段时，它不会提交。我在哪里错了？感谢您的任何建议和帮助！

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>

【问题讨论】：

标签： javascript jquery forms validation email

【解决方案1】：

标签和输入字段的 ID 重复。因此，eMailToTest 的值始终为空。

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

演示：Fiddle

【讨论】：

哦，谢谢你看到这个！现在可以了。谢谢！

【解决方案2】：

尝试这样做：

$("#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_answered 变量在这里似乎是多余的。

【讨论】：

【解决方案3】：

试试这个改变标签的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>

脚本

var myEmailRegEx = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$("#submitbutton").click(function(e){
    e.preventDefault();
    var none_answered = true;
    var eMailToTest = $('#email').val();
        if(!eMailToTest.match(myEmailRegEx)) { 
            none_answered = true;
            $('#email').addClass('error');
            $('#texthere').html("Please provide a correct email");
            console.log('if')
        } 
       else {
           console.log('else')
           $('#email').removeClass('error');
           $(this).closest('form').submit();
        }
 });

DEMO

【讨论】：

【解决方案4】：

你犯了一些错误。

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

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

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

它返回带有 ID 电子邮件的第一个元素的值。所以它是标签（没有价值）。您需要输入元素。

这是工作代码。

HTML：

<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>

Javascript：

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');
            }
     });
 })();

none_answered 变量在这里也是多余的。

Working example.

希望这会有所帮助:)

【讨论】：

非常感谢！它帮助了很多！