单击提交按钮后如何在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

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

preventDefault 停止浏览器的正常提交行为，以便您可以触发任何您想要的事件

Answer 2

试试这个..: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 3

请检查一下

<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>

Answer 4

我强烈建议不要将验证分配给提交按钮单击。 而是分配表单的提交事件处理程序。 我还添加了 trim 并从代码中删除了错误的内容。

$(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 5

您需要在检测到错误后停止代码执行。例如，您可以简单地使用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 6

因为您的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