0

Textfields が空のときに正常に動作する検証があります。しかし、テキストを入力せずに Textfieldにスペースを入れると、検証をバイパスしてForm を送信します。この状況でフォームの送信を防ぐにはどうすればよいですか?

検証用の私のJSコードは次のとおりです。

<script type="text/javascript">
function valid(){
    var flag = "";


    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;


if($("#fname").val()=="")
{
    $("#fname").addClass('errorClass'); 
    $("#fname").focus();
    flag = 1; 
}
else{
    $("#fname").removeClass('errorClass');
}

if($("#lname").val()=="")
{
    $("#lname").addClass('errorClass'); 
    $("#lname").focus();
    flag = 1; 
}
else{
    $("#lname").removeClass('errorClass');
}


if($("#email_address").val() =="" || !$("#email_address").val().match(emailExp)){
    $("#email_address").addClass('errorClass'); flag = 1; 
    }
else{
    $("#email_address").removeClass('errorClass');
    }


if($("#password").val()=="")
{
    $("#password").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#password").removeClass('errorClass');
}


if($("#cpassword").val()=="" || $("#cpassword").val() != $("#password").val() )
{
    $("#cpassword").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#cpassword").removeClass('errorClass');
}



    if(flag==1){
    return false;
    }
   else
   {
    return true;   
   }

    }

</script>

フォームの検証時にクラスを追加するための CSS コードは次のとおりです。

<style type="text/css">
.errorClass{
    border:1px solid #F00 !important;
    background-color:#F99 !important;
}
</style>

そして、ここに私の FORM の HTML コードがあります:

<form id="form2" name="form2" method="post" action="" onSubmit="return valid();">
          <table width="80%" border="0" cellspacing="8">
            <tr>
              <td colspan="2" align="left" valign="middle"><span class="Signup_Text">Sign Up here if you dont have account yet:</span></td>
              </tr>
            <tr>
              <td width="45%" align="left" valign="middle"><input type="text" name="fname" id="fname" placeholder="First Name" class="textfield" /></td>
              <td width="55%" align="left" valign="middle"><input type="text" name="lname" id="lname" placeholder="Last Name" class="textfield" /></td>
            </tr>
            <tr>
              <td align="left" valign="middle"><input type="text" name="email_address" id="email_address" placeholder="Enter Email Address" class="textfield" onBlur="check_email(this.value);" onKeyUp="call_loader(this.value)"/> </td>
              <td align="left" valign="middle">&nbsp;&nbsp; <span id="authentication" class="authentication"></span></td>
              </tr>
            <tr>
              <td align="left" valign="middle"><input type="password" name="password" id="password" placeholder="Enter Password" class="textfield" /></td>
              <td align="left" valign="middle"><input type="password" name="cpassword" id="cpassword" placeholder="Confirm Password" class="textfield" /></td>
            </tr>
            <tr>
              <td align="left" valign="middle"><input type="text" name="dob" id="datepicker" placeholder="Date of Birth" class="textfield" /></td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2" align="left" valign="middle"><input name="gender" type="radio" class="Radio_Class" id="radio" value="Male" checked="checked" />
                <label for="gender"><strong>Male</strong>
                  <input type="radio" name="gender" id="radio2" value="Female" />
                  <strong>Female</strong></label></td>
            </tr>
            <tr>
              <td align="left" valign="middle">
              <span id="Error1">
              <input type="submit" name="Register2" id="Register2" value="Register" class="login_button1" />
              </span>
              </td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
          </table>
        </form>
4

3 に答える 3

3

としてみてください

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

完全なコード

if($.trim($("#fname").val())=="")
{
    $("#fname").addClass('errorClass'); 
    $("#fname").focus();
    flag = 1; 
}
else{
    $("#fname").removeClass('errorClass');
}

if($.trim($("#lname").val())=="")
{
    $("#lname").addClass('errorClass'); 
    $("#lname").focus();
    flag = 1; 
}
else{
    $("#lname").removeClass('errorClass');
}


if($.trim($("#email_address").val()) =="" || !$("#email_address").val().match(emailExp)){
    $("#email_address").addClass('errorClass'); flag = 1; 
    }
else{
    $("#email_address").removeClass('errorClass');
    }


if($.trim($("#password").val())=="")
{
    $("#password").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#password").removeClass('errorClass');
}


if($.trim($("#cpassword").val())=="" || $("#cpassword").val() != $("#password").val() )
{
    $("#cpassword").addClass('errorClass'); 
    flag = 1; 
}
else{
    $("#cpassword").removeClass('errorClass');
}



    if(flag==1){
    return false;
    }
   else
   {
    return true;   
   }

    }

参照

于 2013-09-12T08:57:32.670 に答える
2

を使用して、入力した値をトリムするだけ$.trim()です。これにより、文字列内の空白が削除されます。

if($.trim($("#fname").val()) =="")
于 2013-09-12T08:56:54.190 に答える