Question

我正在尝试验证表单：这是我的表单：

<p id="billing_first_name_field" class="form-row form-row form-row-wide validate-required"><label class="" for="billing_first_name">Name <abbr title="required" class="required">*</abbr></label><input type="text" value="" placeholder="Enter Your Name or Nickname" id="billing_first_name" name="billing_first_name" class="input-text "></p>


<p id="billing_phone_field" class="form-row form-row form-row-last validate-required validate-phone woocommerce-invalid woocommerce-invalid-required-field"><label class="" for="billing_phone">Phone <abbr title="required" class="required">*</abbr></label><input type="tel" value="" placeholder="Enter Your Contact Number" id="billing_phone" name="billing_phone" class="input-text "><div class="notification-box error form_checkout"><i class="fa fa-exclamation-triangle"></i>Please Enter Valid Mobile Number</div></p>


$('#billing_first_name').click(function() {
    //console.log("cl")
        $('.login-right').remove('notification-box');

});
$('#billing_first_name').on('focusout', function() {
        if( validate_input($(this).val()))
    { 
        $(this).after( "<div class='notification-box error form_checkout'><i class='fa fa-exclamation-triangle'></i> Please Enter Your First Name</div>" );
    }

}）;

var reg = /^(?:\+?88)?01[15-9]\d{8}$/;

 $('#billing_phone').on('focusout', function() {
  if (!reg.test($(this).val()))
    { 
        $(this).after( "<div class='notification-box error form_checkout'><i class='fa fa-exclamation-triangle'></i>Please Enter Valid Mobile Number</div>" );
    }
});

当我试图删除该通知框时，我使用了这个：

$(".input-text").click(function() {

$('.notification-box').fadeOut('slow');

}）;

现在我的问题是，如果我点击任何输入所有消息被删除我只删除了当前选定的文本框消息。我也希望tp防止表格被提交，直到验证名称，它可以防止，但对于一位数的电话，表格可以提交。

如何删除邮件后的重复内容？如何删除所选的文本框消息？如何防止提交电话呢？

Answer 1

.after()在匹配的选择器之后添加元素，这使得添加的元素成为下一个兄弟。您需要在点击事件中使用.next()以及输入类型元素上下文：

$(".input-text").click(function() {
  $(this).next().fadeOut('slow');
});

下面的appned form validation消息，并在select上删除

1 个答案: