提交表单时出现jQuery问题

Question

我面临的问题是当我单击表单中的提交按钮时。它没有进行验证，而是直接发布到 php 脚本，但是当我单击文本框时，它正在完美地验证。我需要在提交前验证表单。

Javascript 代码

<script type="text/javascript">

    //Begin of Ready document
    $(document).ready(function () {

            $("#fname").blur(function(){

                if($("#fname").val() == "" ){

                    $("#fname").focus();
                    $("#fvalid").html("First Name Cannot be Blank");
                    return false;

                }else{
                    $("#fvalid").html("");
                    return true;
                }

            });

            $("#lname").blur(function(){

                if($("#lname").val() == "" ){

                    $("#lname").focus();
                    $("#lvalid").html("Last Name Cannot be Blank");
                    return false;

                }else{
                    $("#lvalid").html("");
                    return true;
                }

            });
</script>

HTML 代码

<table class="content" cellspacing="0" cellpadding="0" align="center" style="padding-top:20px;">
    <tr>
        <td class="contentfont">First Name<span class="sup">*</span></td>
        <td class="contentfont">:</td>
        <td><input type="textbox" name="fname" class="textbox" id="fname"></td>
    </tr>
    <tr>
        <td colspan="3"><span id="fvalid" class="failed"></span></td>
    </tr>
    <tr>
        <td class="contentfont">Last Name<span class="sup">*</span></td>
        <td class="contentfont">:</td>
        <td><input type="textbox" class="textbox" name="lname" id="lname"></td>
    </tr>
    <tr>
        <td colspan="3"><span id="lvalid" class="failed"></span></td>
    </tr>
    <tr>
        <td align="center" colspan="3"><input type="submit" name="submit" class="register" value="Register Now" id="submit"></td>
    </tr>

    <tr>
        <td align="center" colspan="3"><input type="submit" name="submit" class="register" value="Register Now" id="submit"></td>
    </tr>

</table>

有人可以帮忙解决这个问题吗？

Answer 1

您正在验证blur。这意味着，当您离开文本框时，此事件会触发。但是您没有编写任何代码来验证提交事件的表单。你应该这样做：

$("#formID").submit(function(){
    var valid = true;
    if($("#fname").val() == "" ){
      $("#fname").focus();
      $("#fvalid").html("First Name Cannot be Blank");
      valid = false;
    }

    if($("#lname").val() == "" ){
         $("#lname").focus();
         $("#lvalid").html("Last Name Cannot be Blank");
         valid = false;
     }

  return valid;

});