與jQuery顯示警告

Question

我正在做一些jQuery表單驗證，我想出了一個問題。我有以下代碼至今：

// catch any form submission 
$('form').submit(function() { 
    'use strict'; 
    // if the browser doesn't support HTML5's required attribute 
    if (!Modernizr.input.required) { 
     // catch any field that should be required 
     $(this).find('input[required]').each(function() { 
      // if is empty 
      if ($(this).val() === '') { 
       // create a span that contains a warning to the user 
       var requiredFieldWarning = document.createElement('span'); 
       requiredFieldWarning.text = 'This field is required.'; 

       // display the span next to the current field 
      } 
     }); 
    } 
}); 

我試圖「附加」或顯示span旁邊的提交形式不驗證的任何輸入，但我不知道怎麼樣。我想這樣做不顯眼，這就是爲什麼我在JavaScript內創建span。

此外，如果提交表單的任何字段未驗證，如何防止提交表單？

Answer 1

我輸入後添加一個span標記。在表單重新生效之前，它將刪除這些跨度並僅在需要時重新創建。如果添加了任何這些跨度，則不會提交表單。

$('form').submit(function (event) { 
    'use strict'; 

    $('.invalid-error', $(this)).remove(); 
    // remove any old spans 

    var submit_form = true; 
    // form submits by default 

    // if the browser doesn't support HTML5's required attribute 
    if (!Modernizr.input.required) { 
     // catch any field that should be required 
     $(this).find('input[required]').each(function() { 
      // if is empty 
      if ($(this).val() === '') { 

       $(this).after('<span="invalid-error">This field is required.</span>'); 
       // add span after input 
       submit_form = false; 

      } 
     }); 
    } 
    if(!submit_form) event.preventDefault(); 
    // stop form from submitting 
}); 

Answer 2

爲什麼要重新發明輪子？你應該使用jquery form validation插件..

編輯：添加代碼以防止無效形式的引用。

回答你的問題：

$('form').submit(function (e) { 
    'use strict'; 
    var valid = true; 
    var $form = $(this); 
    $form.find("span.error").remove(); 
    // if the browser doesn't support HTML5's required attribute 
    if (!Modernizr.input.required) { 
     // catch any field that should be required 
     $form.find(':input[required]').each(function() { 
      // if is empty 
      var $this = $(this); 
      if ($.trim($this.val()) === '') { 
       // create a span that contains a warning to the user 
       $this.after("<span class='error'>This field is required.</span>"); 
       valid = false; 
      } 
     }); 
    } 
    if(!valid){ 
     e.preventDefault(); 
    } 
}); 

這裏是一個較短的版本：

$('form').submit(function (e) { 
    'use strict'; 
    Modernizr.input.required ? e[$(this).find("span.error").remove().end() 
     .find(':input[required][value=""]') 
     .after("<span class='error'>This field is required.</span>") 
     .length ? 'preventDefault': 'isDefaultPrevented']() : null; 
}); 

Answer 3

var flag = 0; 
if ($(this).val() === '') { 
     flag = 1; 
     var warningblock = '<span class="warning">This field is required.</span>'; 
     $(this).after(warningblock);    
    } 
//end of each loop 
if(flag){ //put this block out side the loop 
return false; //form wont submit 
} 
return true; 

    CSS 
    .warning{ 
    /**add styles for warning here***/ 
    } 

Answer 4

的jsfiddle（http://jsfiddle.net/4KxzB/10/）

這是我的工作示例，將按預期在鉻。

要停止提交表單，只是return false;

<form> 
    <input type="text" required/> 
    <input type="submit" value="submit"/> 
</form> 

<script> 
    $('form').submit(function() 
    { 
     'use strict'; 
     // if the browser doesn't support HTML5's required attribute 
     if (!Modernizr.input.required) 
     { 
      var validInput = true; 

      // catch any field that should be required 
      $(this).find('input[required]').each(function() 
      { 
       // if is empty 
       if ($(this).val() === '') 
       { 
        // create a span that contains a warning to the user 
        var requiredFieldWarning = document.createElement('span'); 
        requiredFieldWarning.text = 'This field is required.'; 

        // Cancels form submit 
        validInput = false; 
       } 
      }); 

      return validInput; 
     } 
    }); 
</script>​