Question

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

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>

Answer 1

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

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

演示：Fiddle

Answer 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变量似乎多余。

Answer 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

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

希望这会有所帮助：）

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

4 个答案: