Question

我在wordpress网站的一个页面上添加了两个表单：一个用于移动显示，一个用于桌面计算机的侧边栏（更大的屏幕）。

我以前做过这件事并且似乎无法弄清楚为什么这次没有工作。

现在发生的情况是，即使输入有效的电子邮件，桌面表单也会在电子邮件字段中抛出验证错误。仅不适用于桌面表单上的电子邮件字段，验证适用于所有其他输入字段（名称，..） - 以及移动表单上。

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

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

现在到代码（只是这个问题的关键元素）：页面上 html-form

 <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

一个问题是你的暴徒版本的标签指向完整版输入的ID

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

应该是

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

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

Answer 2

我刚发现问题。

我错过了在这些wordpress页面上看到它不起作用评论被激活。评论的输入表单带有一个电子邮件字段，该电子邮件字段具有相同的ID ，用于电子邮件字段并显示在代码中。

因此，JavaScript检查了评论电子邮件字段（当有两个具有相同ID的字段时，Javascript使用代码中显示的第一个字段）进行验证。

现在我只需要为桌面表单使用不同的ID，如下所示：

<input type="email" id="email-reg" name="email" placeholder="email address">

相应地调整JS验证......

if(validateEmail( $jq('#email-reg').val() )){
        $jq('#error-email-reg').hide(); 
    }
    else{
        valido = false;
        $jq('#error-email-reg').show('fast');
    }

干杯

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

2 个答案: