При тестировании моей веб-формы, созданной с использованием HTML, CSS, Bootstrap, PHP и jQuery, в первую очередь я нажимаю кнопку «Отправить».Когда я это делаю, ошибки текстовой опасности отображаются ниже полей ввода и области текста, как и ожидалось, поскольку поля пусты.Если я добавлю значение в поле ввода «Имя» и снова нажму кнопку «Отправить», поле опасности текста будет продолжать отображаться под полем «Имя».То же самое происходит, когда я пытаюсь сделать то же самое для полей Email и Security Check.
Когда я добавляю значение в поле Text Text Area, ошибка текстовой опасности для поля сообщения исчезает вместе с другими ошибками,Поле сообщения должно иметь значение, чтобы ошибки всех полей исчезли.
Как настроить jQuery так, чтобы после добавления значения в поле я нажимал кнопку "Отправить"чтобы проверить, ошибка текстовой опасности для этого конкретного поля больше не отображается?
HTML и jQuery Code
<div class="container">
<div class="row">
<form method="post" action="index.php" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" id="name" name="name" placeholder="Enter your name" class="form-control" value="<?php echo $name;?>">
<p class="text-danger">You need to enter a name value</p>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" id="email" name="email" placeholder="your@email.com" class="form-control" value="<?php echo $email;?>">
<p class="text-danger">You need to enter a valid email</p>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea id="message" name="message" rows="4" class="form-control"><?php echo $message;?></textarea>
<p class="text-danger">You need to enter a message</p>
</div>
</div>
<div class="form-group">
<label for="secCheck" class="col-sm-2 control-label">
<?php echo $_SESSION["a"] .'+'.$_SESSION["b"];?>
</label>
<div class="col-sm-10">
<input type="text" id="secCheck" name="secCheck" class="form-control">
<p class="text-danger">Answer the question above</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input type="submit" value="Send" class="btn btn-primary btn-large btn-block" id="submit" name="submit">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('form').on('submit',function(){
$(".text-danger").hide();
var holderValue = false;
$(this).find('input[type!="hidden"]').each(function(){
if(!$(this).val()){holderValue=true; $(this).parent().find(".text-danger").show();}
})
if(!$("#message").val()){holderValue=true; $(this).parent().find(".text-danger").show();};
if(holderValue){return false;}
// event.preventDefault();
// console.log('form submitted');
})
$("input").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
$("textarea").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
</script>