javascript - 页面上有 2 个带有 JS 验证的表单 - 其中一个抛出电子邮件验证错误

Question

我在 WordPress 网站的一页上添加了 2 个表单:一个用于移动显示，一个在侧边栏中用于桌面计算机(更大的屏幕)。

我之前已经这样做过，但似乎无法弄清楚为什么这次不起作用。

现在发生的情况是，桌面表单总是在电子邮件字段上引发验证错误，即使输入有效的电子邮件也是如此。它仅不适用于桌面表单上的电子邮件字段，验证适用于所有其他输入字段(名称，..) - 以及移动表单。

我使用简单的 Java 脚本来验证表单，两种表单都使用相同的函数来验证电子邮件地址。表单验证由提交按钮触发，并且所有表单字段都有不同的 ID。

如果我不显示移动表单，桌面电子邮件验证可以正常工作吗？!？

现在看代码(只是这个问题的关键要素):页面上的html表单

 <form class="formMob">
    <label for="fullName">Full Name</label>
    <input type="text" id="fullName-mob" name="fullName" type="text">       
    <div class="form-error" id="error-fullName-mob">
            <span>Please enter your full name</span>
    </div>

    <label for="email">E-mail Address</label>
    <input type="email" id="email-mob" name="email" placeholder="email address">
    <div class="form-error" id="error-email-mob">
            <span>Please enter a valid email</span>
    </div>

    <button class="submitMe" id="submitForm-mob">Submit Details</button>
</form>

 <!-- Desktop form -->
 <form class="form">
        <label for="fullName">Full Name</label>
        <input type="text" id="fullName" name="fullName" type="text">       
    <div class="form-error" id="error-fullName">
            <span>Please enter your full name</span>
    </div>

    <label for="email">E-mail Address</label>
    <input type="email" id="email" name="email" placeholder="email address">
    <div class="form-error" id="error-email">
            <span>Please enter a valid email</span>
    </div>
    <button class="submitMe" id="submitForm">Submit Details</button>
</form>

Java 脚本:

$jq(function(){
    $jq('#submitForm').click(function(event) {
        /*validate email*/
        if(validateEmail( $jq('#email').val() )){
            $jq('#error-email').hide(); 
        }
        else{
            valido = false;
            $jq('#error-email').show('fast');
        }
    });

    $jq('#submitForm-mob').click(function(event) {
        /*validate email*/
        if(validateEmail($jq('#email-mob').val())){
            $jq('#error-email-mob').hide(); 
        }
        else{
           valido = false;
           $jq('#error-email-mob').show('fast');
        }
    });
});

感谢任何评论或想法。谢谢!

Answer 1

一个问题是您的 mob 版本的标签指向完整版本的输入 ID

<label for="email">E-mail Address</label>

应该是

<label for="email-mob">E-mail Address</label>

可能不是验证错误的原因，但会导致屏幕阅读器出现问题