Abide基金會 - 觸發valid.fndtn.abide

我正在使用Abide在窗體上運行驗證，該窗體工作正常。不過，如果表單有效或無效，我很難執行操作。Abide基金會 - 觸發valid.fndtn.abide

HTML：

<form role="form" id="form_search_extended" name="form_search_extended" data-abide="ajax" novalidate> 

    <input name="postalCode" type="text" value="{{$data['postalCode']['value']}}" placeholder="ZIP/Postal Code" required maxlength="10"> 

    <button type="submit" value="Submit">Submit</button> 

</form>

的Javascript：

$('#form_search_extended') 
     .on('invalid.fndtn.abide', function() { 
     callFunctionOnValid(); 
     console.log('invalid!'); 
     }) 
     .on('valid.fndtn.abide', function() { 
     console.log('valid!'); 
     }); 

var form = document.getElementById('form_search_extended'); 
form.onsubmit = function(e) { 

    e.preventDefault(); 

    console.log('form submitted'); 
};

內有效或無效的聽衆沒有被運行的代碼。

我不明白爲什麼這不起作用。 valid.fndtn.abide的事件偵聽器是否未被觸發？阿比德正在工作，因爲這些字段的驗證正在顯示。

謝謝。

來源

2017-04-13 fractal5

您需要初始化腳本。

的結束標記

$('#form_search_extended') 
 
    .on('valid.fndtn.abide', function(e, el) { 
 
    callFunctionOnValid(); 
 
    console.log('invalid!'); 
 
    }) 
 
    .on('invalid.fndtn.abide', function(e, el) { 
 
    console.log(e.target, 'valid!'); 
 
    }) 
 
    .on("submit", function(ev) { 
 
    ev.preventDefault(); 
 
    console.log("Submitted"); 
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" /> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" /> 
 
    
 
</head> 
 

 
<body> 
 

 
    <form data-abide novalidate role="form" id="form_search_extended" name="form_search_extended"> 
 
    <label>Number required 
 
    <input name="postalCode" type="text" placeholder="ZIP/Postal Code" required pattern="number" maxlength="10"> 
 
    </label> 
 
    <small class="error">You need a number.</small> 
 
    <button type="submit" value="Submit">Submit</button> 
 
    </form> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/plugins/foundation.abide.min.js"></script> 
 
    <script> 
 
    $(document).foundation(); 
 
    </script> 
 
</body> 
 

 
</html>

之前添加

<script> 
    $(document).foundation(); 
    </script>

來源

2017-04-26 06:36:27

Abide基金會 - 觸發valid.fndtn.abide

回答

相關問題