时间戳

首页 > 解决方案 > 每个使用 jQuery 移动文本块

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

问题描述

首先，我使用的是 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'.

标签： jquery

解决方案

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

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

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

...prepend(error_msg);

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

推荐阅读