jquery - 使用 jQuery 移动文本 block

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 是您要迭代的集合。换句话说，它是您的所有错误消息，而不仅仅是循环中的当前错误消息。