每个

Question

首先，我使用wordpress和联系表单7插件。

当我提交表单并且必填字段为空时，会产生错误消息。

此消息显示在字段下方。 <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>

我试图做的是将此错误移到相关字段之上。

这是显示错误的表单

<form action="" method="post" class="wpcf7-form wpcf7-acceptance-as-validation invalid" novalidate="novalidate">

    <h4>FIRST NAME: *</h4>
    <span class="wpcf7-form-control-wrap firstname">
        <input name="firstname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="e.g. John" type="text">
        <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>
    </span>

    <h4>LAST NAME: *</h4>
    <span class="wpcf7-form-control-wrap lastname">
        <input name="lastname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="e.g. Smith" type="text">
        <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>
    </span>

    <h4>EMAIL ADDRESS: *</h4>
    <span class="wpcf7-form-control-wrap emailaddress">
        <input name="emailaddress" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Email Address" type="email">
        <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>
    </span>

</form>

这是必需的输出：

    <form action="" method="post" class="wpcf7-form wpcf7-acceptance-as-validation invalid" novalidate="novalidate">

        <h4>FIRST NAME: *</h4>
        <span class="wpcf7-form-control-wrap firstname">
            <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>
            <input name="firstname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="e.g. John" type="text">
        </span>

        <h4>LAST NAME: *</h4>
        <span class="wpcf7-form-control-wrap lastname">
            <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>
            <input name="lastname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="e.g. Smith" type="text">
        </span>

        <h4>EMAIL ADDRESS: *</h4>
        <span class="wpcf7-form-control-wrap emailaddress">
            <span role="alert" class="wpcf7-not-valid-tip">The field is required.</span>
            <input name="emailaddress" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Email Address" type="email">
        </span>

    </form>

我正在使用jQuery，这是我解开的地方。 我在.each()无法按预期工作时遇到问题。

这是我的jQuery：

$(".wpcf7").on('invalid.wpcf7',function(e){
    var error_msg = $('.wpcf7-not-valid-tip');
    error_msg.each( function() {
        $(this).parent('.wpcf7-form-control-wrap').prepend(error_msg);
    });
});

'invalid.wpcf7'是表单的回调函数之一。

但是这样做是将所有错误消息附加到第一个'.wpcf7-form-control-wrap'。

Answer 1

我认为您要预先添加当前错误消息，而不是所有错误消息：

$(this).parent('.wpcf7-form-control-wrap').prepend(this);

您的代码正在执行以下操作：

...prepend(error_msg);

但是，error_msg是您正在迭代的集合。换句话说，它是所有的错误消息，而不仅仅是循环中的当前消息。