2011-11-08 143 views
0

以下代碼是我的註冊頁面的HTML標記和JS部分。我不知道什麼是錯誤的,但是,當我將所有文本輸入未填充並首次單擊提交按鈕時,它會驗證並給出錯誤消息。但是當第二次點擊時,它會直接將所有數據發佈到php文件中。請看看我的js文件(PS不要注意驗證錯誤消息:))AJAX表單提交問題

HTML標記看起來像

<form id="signup_form" action="core/code/PHP/registration/signup.php" method="post"> 
    ... 
</form> 

和JS部分

var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/, 
    fname, mname, lname, email, pass, confirm_pass; 




/*VALIDATION*/ 

/*check if input fields empty or not*/ 

function vPass1() { 
    var isValid = true; 

    if (!fname) { 
     $("#fname").attr('class', 'invalid'); 
     isValid = false; 
    } 

    if (!lname) { 
     $("#lname").attr('class', 'invalid'); 
     isValid = false; 
    } 

    if (!mname) { 
     $("#mname").attr('class', 'invalid'); 
     isValid = false; 
    } 

    if (!email) { 
     $("#email").attr('class', 'invalid'); 
     isValid = false; 
    } 

    if (!pass) { 
     $("#pass").attr('class', 'invalid'); 
     isValid = false; 
    } 
    if (!confirm_pass) { 
     $("#confirm_pass").attr('class', 'invalid'); 
     isValid = false; 
    } 

    return isValid; 

} 

/*Validation start*/ 
/*check names, email, password confirmation*/ 

function validatePassword(pw, options) { 
    // default options (allows any password) 
    var o = { 
     lower: 2, 
     upper: 0, 
     alpha: 0, 
     /* lower + upper */ 
     numeric: 1, 
     special: 0, 
     length: [0, Infinity], 
     custom: [ /* regexes and/or functions */ ], 
     badWords: [], 
     badSequenceLength: 0, 
     noQwertySequences: false, 
     noSequential: false 
    }; 

    for (var property in options) 
    o[property] = options[property]; 

    var re = { 
     lower: /[a-z]/g, 
     upper: /[A-Z]/g, 
     alpha: /[A-Z]/gi, 
     numeric: /[0-9]/g, 
     special: /[\W_]/g 
    }, 
     rule, i; 

    // enforce min/max length 
    if (pw.length < o.length[0] || pw.length > o.length[1]) return false; 

    // enforce lower/upper/alpha/numeric/special rules 
    for (rule in re) { 
     if ((pw.match(re[rule]) || []).length < o[rule]) return false; 
    } 

    // enforce word ban (case insensitive) 
    for (i = 0; i < o.badWords.length; i++) { 
     if (pw.toLowerCase().indexOf(o.badWords[i].toLowerCase()) > -1) return false; 
    } 

    // enforce the no sequential, identical characters rule 
    if (o.noSequential && /([\S\s])\1/.test(pw)) return false; 

    // enforce alphanumeric/qwerty sequence ban rules 
    if (o.badSequenceLength) { 
     var lower = "abcdefghijklmnopqrstuvwxyz", 
     upper = lower.toUpperCase(), 
     numbers = "", 
     qwerty = "qwertyuiopasdfghjklzxcvbnm", 
     start = o.badSequenceLength - 1, 
     seq = "_" + pw.slice(0, start); 
     for (i = start; i < pw.length; i++) { 
     seq = seq.slice(1) + pw.charAt(i); 
     if (
     lower.indexOf(seq) > -1 || upper.indexOf(seq) > -1 || numbers.indexOf(seq) > -1 || (o.noQwertySequences && qwerty.indexOf(seq) > -1)) { 
      return false; 
     } 
     } 
    } 

    // enforce custom regex/function rules 
    for (i = 0; i < o.custom.length; i++) { 
     rule = o.custom[i]; 
     if (rule instanceof RegExp) { 
     if (!rule.test(pw)) return false; 
     } else if (rule instanceof Function) { 
     if (!rule(pw)) return false; 
     } 
    } 

    // great success! 
    return true; 
} 




function vPass2() { 


    if ($.isNumeric(fname)) { 
     $("#fname").attr('class', 'invalid'); 
     $.notifyBar({ 
     cls: "error", 
     html: "Ad ancaq hərflərdən ibarət olmalıdır" 
     }); 
     return false; 
    } 

    if ($.isNumeric(lname)) { 
     $("#lname").attr('class', 'invalid'); 
     $.notifyBar({ 
     cls: "error", 
     html: "Familiya ancaq hərflərdən ibarət olmalıdır" 
     }); 
     return false; 
    } 

    if ($.isNumeric(mname)) { 
     $("#mname").attr('class', 'invalid'); 
     $.notifyBar({ 
     cls: "error", 
     html: "Atanızın adı ancaq hərflərdən ibarət olmalıdır" 
     }); 
     return false; 
    } 

    if (!emailReg.test(email)) { 
     $.notifyBar({ 
     cls: "error", 
     html: "Email ünvanınızı düzgün daxil edin" 
     }); 
     $("#email").attr('class', 'invalid'); 
     return false; 
    } 


    if (pass != confirm_pass) { 
     $.notifyBar({ 
     cls: "error", 
     html: "Şifrə ilə təkrar şifrə üst-üstə düşmür" 
     }); 
     $("#pass").attr('class', 'invalid'); 
     $("#confirm_pass").attr('class', 'invalid'); 
     return false; 
    } 

    if (!validatePassword(pass)) { 
     $.notifyBar({ 
     cls: "error", 
     html: "Şifrə minimum 2 hərif və 1 rəqəmdən ibarət olmalıdır." 
     }); 
     $("#pass").attr('class', 'invalid'); 
     $("#confirm_pass").attr('class', 'invalid'); 
     return false; 
    } 

    return true; 
} 

function validate() { 
    if (vPass1()) { 
     if (vPass2()) { 
     return true; 
     } 
    } else { 
     $.notifyBar({ 
     cls: "error", 
     html: "Qırmızı ilə qeyd olunan xanalara tələb olunan məlumatları daxil edin" 
     }); 
     return false; 
    } 
} /*Validation End*/ 



$(document).ready(function() { 
    $('#signup_form').get(0).reset() 

    $("#signup_form").submit(function (e) { 
     fname = $("#fname").val(); 
     mname = $("#mname").val(); 
     lname = $("#lname").val(); 
     email = $("#email").val(); 
     pass = $("#pass").val(); 
     confirm_pass = $("#confirm_pass").val(); 



     //check the form is not currently submitting 
     if ($(this).data('formstatus') !== 'submitting') { 
     var form = $(this), 
      formData = form.serialize(), 
      formUrl = form.attr('action'), 
      formMethod = form.attr('method'); 

     //add status data to form 
     form.data('formstatus', 'submitting'); 
     if (validate()) { 
      //send data to server for validation 
      $.ajax({ 
       url: formUrl, 
       type: formMethod, 
       data: formData, 
       success: function (data) { 

        //setup variables 
        var responseData = jQuery.parseJSON(data), 
        cl, text; 

        //response conditional 
        switch (responseData.status) { 
        case 'error': 
        cl = 'error'; 
        text = 'Qeydiyyat zamanı problem yarandı'; 
        break; 
        case 'success': 
        cl = 'success'; 
        text = 'Qeydiyyat uğurla başa çatdı'; 
        break; 
        } 


        $.notifyBar({ 
        cls: cl, 
        html: text 
        }); 
       } 
      }); 

      //prevent form from submitting 
      e.preventDefault(); 
     } else { 
      return false 
     } 
     } 
    }); 

}); 
+0

您是否使用這兩個函數來驗證我不清楚什麼後執行什麼,但我會建議檢查函數返回值後,第二次點擊它可能會使它成真 –

+0

vpass1 - >檢查值是否爲空,vpass2->檢查更詳細的,密碼,電子郵件,..其他的東西。只需閱讀代碼。都在評論中明確描述 –

回答

2

這兩個插件可以大大簡化這個給你:

如果您正在使用AJAX提交表單,我強烈推薦的第一個。它會爲你節省很多代碼和沮喪。

+0

我已經做了這項工作,不想重建整個js。有一個小錯誤,我找不到確切的地方我做錯了 –

+0

我想使用表單插件,但需要幫助。我的js不太好 –