Chrome在jQuery表單驗證失敗

Question

有人可以向我解釋爲什麼the form validation fails in chrome？

按下提交應該將紅色的空白字段着色。

我不知道爲什麼鉻失敗 - 很高興能找到一個解決方案...

$('form .meet').focus(function() { 
    $('form .required').each(function() { 
     if($(this).val() == '') { 
      $(this).addClass('warning'); 
     } 
    }) 
}); 
$('form .meet').click(function() { 
    output = true; 
    if($('form .warning').length > 0) { 
     $(this).addClass('disabled').attr('disabled','disabled'); 
     output = false; 
    } 
    return output; 
}); 
$('form .required').keyup(function() { 
    if($(this).val()) { 
     $(this).removeClass('warning'); 
     if($('form .warning').length == 0) { 
      $('form .meet').removeClass('disabled').removeAttr('disabled'); 
     } 
    } 
}); 

• .required是輸入字段不能爲空
• .meet是提交相關領域要求

Answer 1

在Chrome中，click事件在焦點之前觸發。您的代碼需要首先發生焦點事件（將警告類分配給空輸入）。您應該在點擊時執行輸入字段值評估。

$('form .meet').click(function() { 
    output = true; 
    $('form .required').each(function() { 
     if($(this).val() == '') { 
      $(this).addClass('warning'); 
     } 
    }); 
    if($('form .warning').length > 0) { 
     $(this).addClass('disabled').attr('disabled','disabled'); 
     output = false; 
    } 
    return output; 
});