我有一个包含3个类型文本输入的表单。我需要提交该表单以使用必填字段进行验证。我需要用户只完成该表单的两个输入,而不是其中一个,然后提交表单。我该怎么做?我不明白这里的逻辑。
我的代码:
$('#submit-btn').on('click', function(e){
e.preventDefault();
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
if(input1 == '' || input2 == ''){
alert('you have to complete only 2 fields')
}else{
$('#form').submit();
}
});
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='text' value='' id='submit-btn'>
</form>
答案 0 :(得分:3)
您可以使用each
遍历所有输入并检查有多少输入具有如下值。
$('#submit-btn').on('click', function (e) {
e.preventDefault();
var count = 0;
$('input[type=text]').each(function () {
if (this.value != '') count++;
// use this.value.trim() to prevent empty value
});
if (count<2) {
alert('you have to complete only 2 fields')
} else {
$('#form').submit();
}
});
答案 1 :(得分:2)
您可以使用.filter()
过滤掉仅用于空文本框的输入元素,如下所示:
$('#submit-btn').on('click', function(e) {
// credited to : http://stackoverflow.com/questions/1299424/selecting-empty-text-input-using-jquery
var a = $('#form').find(":text").filter(function(){ return $(this).val() == "" });
if (a.length >= 2) {
alert('you have to complete only 2 fields')
} else {
$('#form').submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='button' value='Submit' id='submit-btn'>
</form>
答案 2 :(得分:1)
这应该做你想要的。
function validateSubmit(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
var cnt = 0;
if(input1 != '') cnt++;
if(input2 != '') cnt++;
if(input3 != '') cnt++;
if(cnt < 2){
alert('you have to complete only 2 fields');
return false;
}else{
return true;
}
});
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='text' value='' id='submit-btn' onclick="return validateSubmit();">
</form>
答案 3 :(得分:1)
$('#submit-btn').on('click', function(e){
e.preventDefault();
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
if((input1 != '' && input2 != '') || (input2 != '' && input3 != '') || (input1 != '' && input3 != '')){
$('#form').submit();
}else{
alert('you have to complete only 2 fields')
}
});
答案 4 :(得分:1)
只需+1
具有值的文本框。
$('#submit-btn').on('click', function(e) {
e.preventDefault();
var inputs = $('#input1').val().length > 0 ? 1 : 0;
inputs += $('#input2').val().length > 0 ? 1 : 0;
inputs += $('#input3').val().length > 0 ? 1 : 0;
if (inputs != 2) {
alert('you have to complete only 2 fields')
} else {
$('#form').submit();
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='submit' value='submit' id='submit-btn'>
</form>
&#13;