appned表單驗證消息的下方，去除選擇

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()增加了選擇匹配後的元素，這使得加元作爲緊跟其後的sibling.You需要點擊事件使用.next()隨着輸入型元素上下文：

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