[英]Jquery validate multiple input on submit
我正在嘗試創建一個jquery函數,以在提交表單之前驗證用戶輸入,但它向我顯示錯誤TypeError: $ival.val(...) is null
,我看不到我在做什么錯。 我也不想使用jQuery validate library
,我想創建自己的簡單驗證。
驗證
function checkValidate(input_el){
var status_check = true;
var $ival = $(input_el);
if(($(input_el).attr('type') == 'email' || $(input_el).attr('name') == 'email') && $ival.val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
status_check = false;
} else {
var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
if($(input_el).attr('type') == 'tel' && (!filter.test($ival.val().trim()) || $(input_el).val().trim() < 8)){
status_check = false;
} else {
if($ival.val().trim() < 1) {
status_check = false;
}
}
}
return status_check;
}
function setValidation(input) {
var thisAlert = $(input).parent();
$(input).addClass('inputHasError');
}
崗位職能
function postBusinessSetup(self, check) {
if(check) {
console.log('YES');
} else {
console.log('NO');
}
}
提交驗證碼
$(document).on('submit', '#ExampleForm', function(e) {
var inputs = $('.required-data', this);
var check = true;
var self = this;
for(var i=0; i<inputs.length; i++) {
if(checkValidate(inputs[i]) == false) {
setValidation(inputs[i]);
check = false;
}
}
postBusinessSetup(this, check);
e.preventDefault();
});
HTML
<form id="ExampleForm">
<input type="text" class="required-data"/>
<input type="email" class="required-data"/>
<input type="tel" class="required-data"/>
<input type="url" class="required-data"/>
<select class="required-data"><option value="hello">hello</option></select>
</form>
輸入為空時功能調整可能導致錯誤。
$ival.val().trim()
您可以將其存儲在變量中,實際上還可以優化代碼
var $val = $ival.val() ? $ival.val().trim() : ''
我做了一個自定義的validate方法,如下所示:
var tester = '';
$('input').each(function () {
var value = $(this).attr('value');
value == '' ? tester += 'Please provide'+$(this).attr('name'): false;
});
if(tester == ''){
//--------DO YOUR STUFF
});
}else{
alert(tester);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.