javascript fieldset用法 - 觸發HTML5表單驗證




input vue (8)

我似乎找到了訣竅:只需刪除表單“target”標籤,然後使用提交按鈕驗證表單並顯示提示,檢查表單是否通過javascript有效,然後發布任何內容。 以下代碼適用於我:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>
<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

我有一個包含幾個不同字段集的表單。 我有一些Javascript,一次一個地向用戶顯示字段集。 對於支持HTML5驗證的瀏覽器,我很樂意使用它。 但是,我需要按照我的條件來做。 我正在使用JQuery。

當用戶單擊JS鏈接以移動到下一個字段集時,我需要在當前字段集上進行驗證,並阻止用戶在出現問題時繼續前進。

理想情況下,當用戶失去對元素的關注時,將進行驗證。

目前無效並使用Javascript。 寧願使用原生方法。 :)



向字段集添加或刪除HTML5驗證有點容易。

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

當存在非常複雜(特別是異步)的驗證過程時,有一個簡單的解決方法:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

您無法觸發本機驗證UI,但您可以輕鬆利用任意輸入元素上的驗證API:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

第一個事件在失去焦點時立即觸發每個輸入元素的checkValidity ,如果元素invalid則相應的事件將被第二個事件處理程序觸發並捕獲。 這個將重點放在元素上,但這可能非常煩人,我假設您有一個更好的解決方案來通知錯誤。 這是我上面代碼的一個工作示例


解決此問題的另一種方法:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});

在某種程度上,您可以trigger HTML5表單驗證並向用戶顯示提示而無需提交表單!

兩個按鈕,一個用於驗證,一個用於提交

在validate按鈕上設置onclick偵聽器以設置全局標誌(例如justValidate )以指示此單擊旨在檢查表單的驗證。

並在提交按鈕上設置onclick偵聽器,將justValidate標誌設置為false。

然後在表單的onsubmit處理程序中,檢查標誌justValidate以確定返回值並調用preventDefault()以停止提交表單。 如您所知,HTML5表單驗證(以及對用戶的GUI提示)是在onsubmit事件之前執行的,即使表單是VALID,您也可以通過返回false或調用preventDefault()來停止表單提交。

並且,在HTML5中,您有一種檢查表單驗證的方法: form.checkValidity() ,然後您可以知道表單是否在您的代碼中驗證。

好的,這是演示: http://jsbin.com/buvuku/2/edithttp://jsbin.com/buvuku/2/edit


擴展Storage對像是一個很棒的解決方案。 對於我的API,我已經為localStorage創建了一個外觀,然後在設置和獲取時檢查它是否是一個對象。

var data = {
  set: function(key, value) {
    if (!key || !value) {return;}

    if (typeof value === "object") {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },
  get: function(key) {
    var value = localStorage.getItem(key);

    if (!value) {return;}

    // assume it is an object that has been stringified
    if (value[0] === "{") {
      value = JSON.parse(value);
    }

    return value;
  }
}






javascript jquery validation html5