I have a form with 3 inputs of type text. I need on submit of that form to make a validation with required fields. I need the user to complete only two inputs of that form, no mather which one of them, and then submit the form. How would I make this? I don't get the logic here.
My code:
$('#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>
You can use each
to iterate through all inputs and check how many inputs have value like following.
$('#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();
}
});
You can filter out the input element only for empty textbox by using .filter()
like following code :
$('#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>
This should do what you want.
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>
$('#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')
}
});
Just +1
the textboxes which has a value.
$('#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(); } });
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.