单击提交按钮后如何在jquery中显示错误

时间:2015-11-17 09:40:14

标签: php jquery html forms

我的问题是,点击提交按钮后,页面将转到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文件,并且不会显示任何错误并在数据库中存储空白数据。

6 个答案:

答案 0 :(得分:1)

您需要在检测到错误后停止执行代码。例如,您可以简单地使用return falsereturn

&#13;
&#13;
$('#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
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

因为您input type is submit change the type to button可以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") } }); 以避免自动传递表单

使用event.preventDefault()

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

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

更改为

public static document[] search(document type, searchword[] searchwords) {}

答案 2 :(得分:0)

试试这个..: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();" />

答案 3 :(得分:0)

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

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

答案 4 :(得分:-1)

{LastWriteTime = dateTime}

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

答案 5 :(得分:-1)

请检查

var animateBallBetweenObjects = function (obj1, obj2) {
    var completedLeft, completedTop;
    // obj1, obj2 are predefined.
    var c1 = obj1.getCenterPoint();
    var c2 = obj2.getCenterPoint();
    var circle = new fabric.Circle({
        radius: 10,
        fill: 'blue',
        left: c1.x,
        top: c1.y,
        originX: 'center',
        originY: 'center',
        selectable: false
    });

    canvas.add(circle);

    circle.animate('left', c2.x, {
      onChange: canvas.renderAll.bind(canvas),
      startValue: c1.x,
      endValue: c2.x,
      onComplete: function() {
        completedLeft = true;
        completedTop && canvas.remove(circle);
      },
      easing: fabric.util.ease['easeInQuad']
    }).animate('top', c2.y, {
      startValue: c1.y,
      endValue: c2.y,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        completedTop = true;
        completedLeft && canvas.remove(circle);
      },
      easing: fabric.util.ease['easeInQuad']
    });
};