التحقق من صحة نموذج jquery - "إرسال ()"

Question

أحاول معرفة كيفية التحقق من صحة نموذج ولدي هذه المشكلة:

عندما أقوم بتشغيل هذا الرمز ولا أدخل أي شيء - يجب ألا يرسل النموذج، لكنه يفعل ذلك. سؤالي هو ... لماذا، وكيف يمكنني إصلاحه؟

HTML:

<form method="post" action="#">
<fieldset>
<legend>Formular</legend>
<label for="name">Name: </label>
<input type="text" class="required" name="name" value="" />
<br /><br />
<label for="pass">Password: </label>
<input type="password" class="required" name="pass" value="" />
<br /><br />
<input type="submit" value="Submit!" />
</fieldset>
</form>

مسج:

$('#obal form').submit(function() { 
    $('.required').each(function() {
        if($(this).val() == "") {                   
            if (errorCount === undefined) {
                    var errorCount = 1;
            } else {
                ++errorCount;
            } 
        } 
    }); 

    if (errorCount > 0) {
        window.alert( 'You didnt pass' );
        return false;
    } else {
        return true;
    }   
});

إذا كنت تعرف أي تحسينات أخرى يمكن أن يستغرق الرمز، فيمكنك أن تخبرني أيضا أيضا .. :-)

Answer 1

لا يعمل الرمز الحالي الخاص بك لأن ErrorCount هو محلي للوظيفة المجهولة التي تم تمريرها إلى كل طريقة. لن يكون مرئيا في الخارج.

هذا يعني عندما تفعل errorCount > 0 بعد كل طريقة، تقيم False وتقديم النموذج.

أود أن أكتبها وظيفتك مثل هذا،

$('#obal form').submit(
    function(ev) 
    { 
        var errorCount = 0; //define your errorCount variable to zero before you 
                            //iterate using each, errorCount will be available inside your each iteration function.
        $('.required').each(
            function() 
            {
                //Due to JavaScript clousures, you can access errorCount in this function.
                if($(this).val() === '')
                    errorCount++;  
            }
        );

        //If we don't find any errors, we return. This will let the browser continue submitting the form.      
        if(errorCount == 0)
            return;

        //If control comes here, it means there were errors. Prevent form submission and display error message.
        ev.preventDefault();
        alert('Validation failure.');
    }
);

تعديل:

لماذا لا يعمل الكود الخاص بك؟

دعونا نسمم الاسم إلى الوظيفة المجهولة (قل myeachloop) مرت إلى طريقة ". كل شيء".

$('#obal form').submit(function() { 
$('.required').each(

  function myEachLoop () 
  {
    if($(this).val() == "") {                               
        if (errorCount === undefined) {
                var errorCount = 1; //you have defined the errorCount which is 'local' to the 'myEachLoop' function. Once myEachLoop function is over. errorCount variable is gone! 

        } else {
            ++errorCount;
        } 
    } 
}); 

//errorCount is 'undefined' here because the previously defined errorCount variable is gone.
if (errorCount > 0) {
    window.alert( 'You didnt pass' );
    return false;
} else {
    return true;
}   
});

هل ترى الآن الخطأ في التعليمات البرمجية الخاصة بك؟

تحتاج أيضا إلى فهم إغلاق JavaScript لمعرفة لماذا يعمل الكود الخاص بي.

Answer 2

غير هذا:

$('#obal form').submit(function() {

الى هذا:

$('#obal form').submit(function(event) {
    event.preventDefault();

وإذا كان النموذج صالحا، فقم بذلك (ضمن وظيفتك .submit):

$(this).submit();

وسيتم تقديم النموذج الخاص بك.

Answer 3

قد ترغب في تجربة هذا المسج توصيل في. وبعد انها مرنة للغاية وسهلة الاستخدام.

Answer 4

أود أن أعلن خطأ في الاعتماد قبل الحلقة للتأكد من صحة النطاق:

var errorCount = 0;
$('.required').each(function() {
    if($(this).val() == "") {                               
        errorCount++;           
    } 
});