Question

我有一个表单，根据所选选项显示其他字段。

当表单经过验证（有错误）时，在显示的附加字段下会显示一条错误消息。这是预期的行为。

如果我然后选择其他选项，则旧选项输入会隐藏（预期）但旧的验证错误消息仍然存在。

如何隐藏验证错误消息？

表格代码：

<div class="row">
  <section class="col col-12">
    <label class="label">Type</label>
<label class="select">
      <select id="type" name="type">
        <option value="" selected>Select a cancelation type</option>
        <option value="c1">Cancel and keep all payments</option>
        <option value="c2">Cancel and issue deposit refund</option>
        <option value="c3">Cancel and issue partial refund</option>
        <option value="c4">Cancel and issue full refund</option>
        <option value="c5">Cancel and add aditional charges</option>
      </select>
      <i></i>
    </label>
  </section>
</div>
<div class="ammount">
<div class="row">
<section class="col col-12">
  <label id="ammountt" class="label" style="display:none;">Refund ammount</label>
  <label class="input" id="ammountl" style="display:none;>
    <i class="icon-prepend fa fa-gbp"></i>
    <input class="" id="ammount" type="text" pattern="\d+(\.\d{2})?" placeholder="" name="ammount" value="" >
  </label>
  <label id="aditionalt" class="label" style="display:none;">Aditional charge ammount</label>
  <label class="input" id="aditionall" style="display:none;>
    <i class="icon-prepend fa fa-gbp"></i>
    <input class="" id="aditional" type="text" pattern="\d+(\.\d{2})?" placeholder="" name="aditional" value="" ></label>
  </section>
</div>

JS：

$(document).ready(function() {

$("#type").change(function () {
    var choice = jQuery(this).val();
    if ($(this).val() == 'c3') {
        $('#ammountt').show();
        $('#ammountl').show();
    } else {
        $('#ammountt').hide();
        $('#ammountl').hide();
    }
    if ($(this).val() == 'c5') {
        $('#aditionalt').show();
        $('#aditionall').show();
    } else {
        $('#aditionalt').hide();
        $('#aditionall').hide();
    }
});


var $CancelBookingForm = $("#cancel-booking-form").validate({

    // Rules for form validation
    rules : {
        name : {
            required : true
        },
        ammount : {
            required: true
        },
        aditional : {
            required: true
        },
    },

    // Messages for form validation
    messages : {
        name : {
            required : 'Please select an upsell from the drop down.'
        },
        ammount : {
            required: 'Please enter a refund ammount.'
        },
        aditional : {
            required: 'Please enter an aditional charge ammount.'
        },
    },

    // Do not change code below
    errorPlacement : function(error, element) {
        error.insertAfter(element.parent());
    }
});

})

Answer 1

您需要找到invalid类，然后将其删除

$("#type").change(function () {
    var choice = jQuery(this).val();
    //if you just want to remove them all
    $(".input em.invalid").remove();

    if ($(this).val() == 'c3') {
        $('#ammountt,#ammountl').show();
    } else {
        $('#ammountt,#ammountl').hide();
        $('#ammountt,#ammount1').siblings("em.invalid").remove();
    }
    if ($(this).val() == 'c5') {
        $('#aditionalt,#aditionall').show();
    } else {
        $('#aditionalt,#aditionall').hide();
        $('#aditionalt,#aditionall').siblings("em.invalid").remove();
    }
});

jQuery在下拉列表更改时隐藏验证错误

1 个答案: