ajaxでパスワードが8文字未満であるかどうかをチェックする方法は？

Question

ユーザーのパスワードまたはユーザー名が8文字未満であるかどうかを確認しようとしていますが、前にこれを行いましたが、フォームにonsubmit="return Validation()"を使用しています。しかし、今はフォームをajax経由で送信しています。私はajaxコードで次のコードを変換または挿入する方法がわかりません。

以下は自分のAjaxコードに含めるコードです。フォームを送信すると、ユーザーのユーザー名とパスワードが8文字未満であるかどうかがチェックされます。

function Validation(){ 
var username = document.getElementById ("username");    
var password = document.getElementById ("password"); 

var username = $("#username").val(); 
var password = $("#password").val(); 
var password2 = $("#password2").val(); 

var user_textBox = document.getElementById("username"); 
var user_textLength = user_textBox.value.length; 

var pw_textBox = document.getElementById("password"); 
var pw_textLength = pw_textBox.value.length; 

var x = email; 
var atpos = x.indexOf("@"); 
var dotpos = x.lastIndexOf("."); 
if(user_textLength <= 7){ 
    alert('Username must contain atleast 8 characters.'); 
    document.getElementById ("username").focus(); 
    return false; 
    } 
    else if(pw_textLength <= 7){ 
     alert('Password must contain atleast 8 characters.'); 
     document.getElementById ("password").focus(); 
     return false; 
     } 
    else if(password2==""){ 
     alert('Please re-type your password'); 
     document.getElementById ("password2").focus(); 
     return false; 
    } 
    else if(password != password2){ 
     alert('Password and Re-typed Password do not match'); 
     document.getElementById ("password2").focus(); 
     return false; 
    } 
    else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { 
     alert("Not a valid e-mail address"); 
     document.getElementById ("email").focus(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
} 

以下は私のajaxコードです。

$('document').ready(function(){ 
    function submitForm() 
    {  
     var data = $("#signUpForm").serialize(); 
     $.ajax({ 
      // code here... 
     }); 
     return false; 
    } 

    $("#signUpForm").on("submit",submitForm); 
    document.forms["signUpForm"].reset(); 
}); 

EDIT：私のコードは次のようになりました

$('document').ready(function() 
{ 
    $('#signUpForm').submit(function(e)){ 
     function Validation() { 
      var username = document.getElementById ("username");    
      var password = document.getElementById ("password"); 

      var username = $("#username").val(); 
      var password = $("#password").val(); 
      var password2 = $("#password2").val(); 

      var user_textBox = document.getElementById("username"); 
      var user_textLength = username.trim().length; 

      var pw_textBox = document.getElementById("password"); 
      var pw_textLength = password.trim().length; 

      var x = email; 
      var atpos = x.indexOf("@"); 
      var dotpos = x.lastIndexOf("."); 
      if(user_textLength <= 7){ 
        alert('Username must contain atleast 8 characters.'); 
        document.getElementById ("username").focus(); 
        return false; 
       } 
       else if(pw_textLength <= 7){ 
        alert('Password must contain atleast 8 characters.'); 
        document.getElementById ("password").focus(); 
        return false; 
       } 
       else if(password2==""){ 
        alert('Please re-type your password'); 
        document.getElementById ("password2").focus(); 
        return false; 
       } 
       else if(password != password2){ 
        alert('Password and Re-typed Password do not match'); 
        document.getElementById ("password2").focus(); 
        return false; 
       } 
       else if(email==""){ 
        alert('Please input your email'); 
        document.getElementById ("email").focus(); 
        return false; 
       } 
       else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { 
        alert("Not a valid e-mail address"); 
        document.getElementById ("email").focus(); 
        return false; 
       } 

       else{ 
        return true; 
       } 
     } 
     if(!Validation()){ 
      e.preventDefault(); 
      return false; 
     } else { 
      //var data = $("#signUpForm").serialize(); 

       $.ajax({ 

       type : 'POST', 
       url : 'signup.php', 
       data : $(this).serialize() 
       beforeSend: function() 
       { 
        $("#error").fadeOut(); 
        }, 
       success : function(data) 
          {       
           if(data==2){ 

            $("#error").fadeIn(1000, function(){ 


              alert('Email is already taken.'); 
              document.getElementById ("email").focus(); 

            }); 

           } 
           else if(data==1){ 
            $("#error").fadeIn(1000, function(){ 


              alert('Username is already taken.'); 
              document.getElementById ("username").focus(); 
            }); 
           } 
           else if(data==3) 
           { 

            alert('Registration successfully submitted.'); 
            window.location='index.php'; 

           } 
           else{ 

            $("#error").fadeIn(1000, function(){ 

         $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>'); 

            $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account'); 

            }); 

           } 
          } 
       }); 
       return false; 
      } 
    }); 
    $("#signUpForm").on("submit",submitForm); 
    document.forms["signUpForm"].reset(); 
}); 

Answer 1

全く同じに見える何 ：

if(user_textLength <= 7){ 
     return false; // function breaks here, following sentences will not execute 
    } 
    var data = $("#signUpForm").serialize(); 
    $.ajax({ 
     //.... 

Answer 2

あなたはおそらくlengthプロパティを見て、自分の価値観の長さを確認することができますtrim()の呼び出しの後に、先頭または末尾の空白を無視する場合は、

あなたは既にjQueryのを使用しているので、次のように

function Validation(){ 
    // Get your properties 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    var password2 = $("#password2").val(); 

    // Validation example 
    if(username.trim().length < 8){ 
     // Something is wrong, tell the user 
     return false; 
    } 

    // Continue as necessary 
} 

、あなたは自分のフォーム送信イベントをキャプチャするために、イベントハンドラを配線することができます：

$(function(){ 
    // When your form is submitted 
    $('#signUpForm').submit(function(e){ 
      // Validate here 
      if(!Validation()){ 
       // Validation failed 
       e.preventDefault(); 
       return false; 
      } else { 
       // Otherwise handle your AJAX request 
       $.ajax({ 
        // Various things here 
        data: $(this).serialize() 
       }); 
      } 
    }); 
}); 

UPDATEあなたが最近あなたのコードを追加しているので

Validation()関数をフォーム送信のスコープから除外してリファクタリングし、デフォルトの送信動作を削除し（jQueryを使って処理されるため）、jQueryを使用してネイティブJavascript呼び出しを削除しますすでにあなたは）それを歌う：

<script> 
    function Validation() { 
      // Define your variables 
      var username = $("#username").val(); 
      var password = $("#password").val(); 
      var password2 = $("#password2").val(); 
      // Get your lengths 
      var user_textLength = username.trim().length; 
      var pw_textLength = password.trim().length; 

      var x = email; 
      var atpos = x.indexOf("@"); 
      var dotpos = x.lastIndexOf("."); 
      if(user_textLength <= 7){ 
        alert('Username must contain atleast 8 characters.'); 
        $("#username").focus(); 
        return false; 
      } 
      else if(pw_textLength <= 7){ 
        alert('Password must contain atleast 8 characters.'); 
        $("#password").focus(); 
        return false; 
      } 
      else if(password2.length == 0){ 
        alert('Please re-type your password'); 
        $("#password2").focus(); 
        return false; 
      } 
      else if(password != password2){ 
        alert('Password and Re-typed Password do not match'); 
        $("#password2").focus(); 
        return false; 
      } 
      else if(email.length == 0){ 
        alert('Please input your email'); 
        $("#email").focus(); 
        return false; 
      } 
      else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { 
        alert("Not a valid e-mail address"); 
        $("#email").focus(); 
        return false; 
      } 
      else { 
       return true; 
      } 
    } 
    $(function(){ 
     $('#signUpForm').submit(function(e)){ 
      // Prevent the default submission regardless (as it will be handled via AJAX 
      e.preventDefault(); 
      if(!Validation()){ 
       return false; 
      } else { 
       $.ajax({ 
        type : 'POST', 
        url : 'signup.php', 
        data : $(this).serialize() 
        beforeSend: function(){ 
         $("#error").fadeOut(); 
        }, 
        success: function(data){       
         if(data==2){ 
          $("#error").fadeIn(1000, function(){ 
           alert('Email is already taken.'); 
           $("#email").focus(); 
          }); 
         } else if(data==1){ 
          $("#error").fadeIn(1000, function(){ 
           alert('Username is already taken.'); 
           $("#username").focus(); 
          }); 
         } else if(data==3){ 
           alert('Registration successfully submitted.'); 
           window.location='index.php'; 
         } else{ 
           $("#error").fadeIn(1000, function(){ 
            $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>'); 
            $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account'); 
           }); 
         } 
        } 
       }); 
      } 
     }); 
    }); 
</script>