как показать ошибку в JQuery после нажатия кнопки отправки

Question

Моя проблема заключается в том, что после нажатия на кнопку отправки на странице будет идти в PHP файл так, как мой HTML-код, как этот

<form action="register.php" method="post"> 
    <input type="text" name="name" id="name"><div id="adiv"></div> 
    <input type="submit" value="submit" id="button"> 
</form> 

и мой JQuery код выглядит это

$('#name').focusout(function(){ 
    if($('#name').val().length==0){ 
     $('#adiv').html("please enter name") 
    } 
}); 
$('#button').click(function(){ 
    if($('#name').val().length==0){ 
     $('#adiv').html("please enter your name") 
    } 
}); 

, но после нажатия кнопки он перенаправляет на PHP файл и не показывает какой-либо ошибки и хранить пустые данные в базе данных представить.

Answer 1

Ну, вам нужно остановить выполнение кода после обнаружения ошибки. Например, вы можете просто использовать return false или return:

$('#name').focusout(function() { 
 
    if ($('#name').val().length == 0) { 
 
    $('#adiv').html("please enter name") 
 
    } 
 
}); 
 
$('#button').click(function() { 
 
    if ($('#name').val().length == 0) { 
 
    $('#adiv').html("please enter your name") 
 
    return false;//add this 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="register.php" method="post"> 
 
    <input type="text" name="name" id="name"> 
 
    <div id="adiv"></div> 
 
    <input type="submit" value="submit" id="button"> 
 
</form>

Answer 2

Потому что ваш input type is submit вы можете change the type to button или добавить event.preventDefault(), чтобы избежать автоматического прохождения формы

использование event.preventDefault()

$('#button').click(function(e) { 
    e.preventDefault();//this will stop form auto submit thus showing your error 
    if ($('#name').val().length == 0) { 
     $('#adiv').html("please enter your name") 
    } 
}); 

Или

<input type="submit" value="submit" id="button"> 

изменение

<input type="button" value="submit" id="button">//also prevent form auto submit thus will show the error 

Answer 3

$('your-form').on('submit', function(e) { 
e.preventDefault(); 
//your code bere 
}); 

preventDefault остановить нормальное поведение представить вашего браузера, так что вы можете запускать любое событие, которое вы хотите

Answer 4

попробовать это ..: D

function validateFunction(){ 
 
    if(document.getElementByID('name').value.length==0){ 
 
     document.getElementByID('adiv').innerHTML = "please enter your name"; 
 
     return false; 
 
    } 
 
    return true; 
 
}

<input type="submit" value="submit" id="button" onclick="return validateFunction();" />

Answer 5

Я настоятельно рекомендую никогда не назначать проверку нажатию кнопки отправки. Вместо этого назначьте обработчик события отправки формы. Я также добавил обрезку и удалил содержимое ошибки из кода.

$(function() { 
 
    $('#name').focusout(function() { 
 
    var empty = $.trim($('#name').val()).length == 0; 
 
    $('#adiv').toggle(empty); 
 
    }); 
 
    $('#form1').on("submit",function(e) { 
 
    $('#name').focusout(); 
 
    if ($('#adiv').is(":visible")) { 
 
     e.preventDefault() 
 
    } 
 
    }); 
 
});

#adiv { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="register.php" method="post" id="form1"> 
 
    <input type="text" name="name" id="name"> 
 
    <div id="adiv">please enter name</div><br/> 
 
    <input type="submit" value="submit" id="button"> 
 
</form>

Answer 6

Пожалуйста, проверьте это

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form method="post"> 
    <input type="text" name="name" id="name"> 
    <div id="adiv"></div> 
    <input type="button" value="submit" id="button"> 
</form> 

<script> 
$(document).ready(function(){ 
$('#button').on('click',function(){ 

if($('#name').val() == ''){ 
$('#adiv').text("Please enter name!!"); 
}else{ 

    $('#adiv').text($('#name').val()); 
} 

}) 

}) 

</script>