從jquery返回javascript？

Question

所以我很新的JavaScript，甚至更新的jQuery。在這個項目atm上工作，我開始使用Javascript，但是我的問題的很多解決方案在jQuery中更容易。

所以我有一些JavaScript基本上可以防止用戶按提交如果所有的表格都沒有通過驗證。

所以這是我的領域。

<td><input type="password" maxlength="16" name="passwd" id="passwd" onblur="validatePassword(this.value)" /></td> 
<td><span id="pMess"></span></td> 

這是我的提交。

<td><input type="submit" value="Register" onclick="return validate(this.form)"/></td> 
<td><a href='Index.php'>Login?</a></td> 

正如你可以看到，當你按下提交它去驗證功能是：

function validate(theForm) { 
    var valid = true; 

    if (!validateEmail(theForm.emailrec.value)) valid = false; 
    if (!validatePassword(theForm.passwd.value)) valid = false; 
    if (!validatePostcode(theForm.postcode.value)) valid = false; 
    if (valid) return true; 
    else return false; 
} 

最後，這是現場檢查。

function validatePassword(passwordString) { 
    var valid = true; 

    if (passwordString == "") { 
     feedback('pMess','Enter your password here'); 
     valid = false; 
    } else if (passwordString.length <= 5){ 
     feedback('pMess','Password too short'); 
     valid = false; 
    } else feedback('pMess','Acceptable'); 

    if (valid) return true; 
    else return false; 
} 

我的用戶名現場檢查是略低不同，因爲它是在jQuery的

$(document).ready(function() { 
    $('#username').keyup(username_check); 
}); 

function username_check() { 
    var username = $('#username').val(); 
    if(username == "" || username.length < 6){ 
     $('#username').css('border', '3px #CCC solid'); 
     $('#tick').hide(); 
     $('#cross').fadeIn(); 
    } else { 
     jQuery.ajax({ 
      type: "POST", 
      url: "check.php", 
      data: 'username=' + username, 
      cache: false, 
      success: function(response){ 
       if(response == 1) { 
        $('#username').css('border', '3px #C33 solid'); 
        $('#tick').hide(); 
        $('#cross').fadeIn(); 
       } else { 
        $('#username').css('border', '3px #090 solid'); 
        $('#cross').hide(); 
        $('#tick').fadeIn(); 
       } 
      } 
     }); 
    } 
} 

所以我想要做的就是username_check返回像我其他方面的檢查程序。我只是尋求幫助，我應該把回報和東西放在哪裏。無論我嘗試似乎打破代碼...

所有我到目前爲止

if (!check_username(theForm.username.value)) valid = false; 

任何幫助指着我在正確的方向，將不勝感激。

Answer 1

不知道如果我遵循，你希望函數返回true或false，如果驗證，對不對？

編輯：我的代碼是廢話，感謝烤指出。

因此，當你在做一個AJAX調用你真的不能得到，如果它是有效的（true或false）在相同的功能，你可能需要做不同的事情....

一對夫婦的思路; - 使用你的DOM（添加一個「無效」類或類似的東西到表單字段，然後檢查該值。

- 使用全局變量「valid_user」保存驗證的結果...（i知道全局變量吸這是一個不好的做法，但是，嘿，如果你有一個最後期限？）

那麼，當你在證實洞形式，檢查這個事情，而不是再次調用username_check。

希望這有助於！

Answer 2

問題不是jQuery。問題是，您正在使用異步調用做一些驗證。 jQuery.ajax是異步的，這意味着代碼將在獲取check.php時繼續執行。換句話說，到回覆的時候，username_check()已經返回並提交了您的表單（或取消了提交）。

爲您的代碼（長度檢查）的非AJAX的一部分，你可以做一個return就好：

function username_check() { 
    var username = $('#username').val(); 

    // NOTE: This is redundant, as "" has length 0 
    if(username == "" || username.length < 6){ 
     $('#username').css('border', '3px #CCC solid'); 
     $('#tick').hide(); 
     $('#cross').fadeIn(); 
     return false; // This will work here 
    } else { 
     // AJAX stuff 
    } 
} 

不幸的是，其餘變得更棘手一點。你真正想要做的是等待你的表單，直到用戶名檢查完成，這意味着你的提交需要進入回調函數（即你的AJAX的success部分）。如果你只有一個AJAX呼叫，這並不算糟糕。如果您有多個AJAX調用，則需要嵌套所有調用（這會使代碼花費更長的時間，不是很漂亮，並且在發生一次調用失敗後不會輕鬆進行其他檢查），或者需要使用deferred objects（或其他相似），這不是微不足道（但非常有用）。

假設你有一個AJAX調用用戶名：

首先，添加一個ID到您的提交按鈕。這使得它更容易從jQuery的參考：

<td><input id="mysubmit" type="submit" value="Register" onclick="return validate(this.form)"/></td> 
<td><a href='Index.php'>Login?</a></td> 

其次，這樣做畢竟其他檢查的用戶名檢查，只有當其他檢查是有效的提交：

function validate(theForm) { 
    var valid = true; 

    if (!validateEmail(theForm.emailrec.value)) valid = false; 
    if (!validatePassword(theForm.passwd.value)) valid = false; 
    if (!validatePostcode(theForm.postcode.value)) valid = false; 

    // The non-AJAX checks for username length: 
    var username = theForm.username.value; 
    if (!validateUsername(username)) valid = false; 

    jQuery.ajax({ 
     type: "POST", 
     url: "check.php", 
     data: 'username=' + username, 
     cache: false, 
     success: function(response){ 
      if(response == 1) { 
       $('#username').css('border', '3px #C33 solid'); 
       $('#tick').hide(); 
       $('#cross').fadeIn(); 
      } else { 
       $('#username').css('border', '3px #090 solid'); 
       $('#cross').hide(); 
       $('#tick').fadeIn(); 

       // If the other checks were OK, submit the form manually 
       if(valid) { 
        $("#mysubmit").submit(); 
       } 
      } 
     } 
    }); 

    // ALWAYS return false. 
    // We will submit the form manually if the checks are OK 
    // For now, prevent the submit 
    return false; 
} 

有意義嗎？

注：

• 你可能要禁用提交按鈕被點擊後（和失敗重新啓用它。否則，如果AJAX需要一段時間，用戶可能會改變字段值。在回調之前允許提交不好的數據而沒有檢查
• 對此的另一種解決方案是檢查onsubmit目前，如果用戶按下回車鍵不會調用您的支票，這是不好的！