jquery - 每个使用jQuery移动文本块

首先，我正在使用wordpress并联系form 7插件。

当我提交表单并将必填字段留空时，会产生一条错误消息。

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

我想要做的是将此错误移到relevent字段上方。

这是显示错误的表格

<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'上。

最佳答案

我认为您想添加当前的错误消息，而不是所有的错误消息：

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

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

...prepend(error_msg);

但是，error_msg是您要遍历的集合。换句话说，这是您所有的错误消息，而不仅仅是循环中的当前错误消息。