Question

我做了一个注册表单，如果你保留姓名或姓氏输入，它会显示输入的错误，我在收音机输入中做了同样的事情。每件事情都有效，但问题是单击提交按钮时，错误会闪烁并消失。按钮类型是提交我正在写下代码

function SignUp() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").text();
var date = $("#dd option:selected").text();
var month = $("#mm option:selected").text();
var yy = $("#yy option:selected").text();
var sex = $("input:radio[name=sex]:checked").val();
     if ($.trim($("#firstname").val()) == "") {
    document.getElementById("firstnameerror").innerHTML = "Please write firstname";



    if ($.trim($("#lastname").val()) == "") {
    document.getElementById("lastnameerror").innerHTML = "Please write lastname";



    if (!$("input[name='sex']:checked").val()){
    document.getElementById("gendererror").innerHTML = "Please select your gender";

       }

    }
      }
 }

Answer 1

您的问题是您不会阻止正在提交的表单的默认行为。试试这个（简化代码）：

function SignUp(e) {
    var firstname = $("#firstname").val();
    var lastname = $("#lastname").text();

    if ($.trim($("#firstname").val()) == "") {
        $("#firstnameerror").text("Please write firstname");
        e.preventDefault(); // <!-- prevent form submit in case of errors
    }
    else {
        $("#firstnameerror").text('');
    }

    if ($.trim($("#lastname").val()) == "") {
        $("#lastnameerror").text("Please write lastname");
        e.preventDefault();
    }
    else {
        $("#lastnameerror").text("");
    }
}

$('#form').submit(SignUp)

http://jsfiddle.net/fh6Ar/

也不要绑定点击事件来提交按钮。表单有submit event的特殊事件。

Answer 2

当您点击提交按钮时调用SignUp()功能时，您必须return false才能提交表单。

使用jquery，您可以轻松完成：

$('#submitButtonId').click(function(){

 SignUp();
 return false;

})

如果在javascript验证之后一切正常，你可以这样做：

$(#myFormId).submit();

或者只是简单地说：

<input type="submit" name="send" value="SEND" onclick="SignUp(); return false;" />

单击提交按钮时，错误闪烁

2 个答案: