Disable - Enable Submit Button for Several Fill in

A

abcid d

Guest
I have several types of fill in such as input, select option... and validations. Submit button will be disable at first. Every time I enter a field, validation function will work right away.

After every field is filled with valid input, I want to enable the submit button. (but somehow my code for enable button makes the validation alert at the first load, so I commented that code)

/* if ( validateForm() === val) {
$('.myButton').prop("disabled", false);
}
else{
$('.myButton').prop("disabled", true);
} */


jsfiddle

JS

function validateForm() {
val = true;
var firstName = $('#firstname').val();
if (!firstName) {
$('#firstname').siblings(".error").addClass('alert-on');
val = false;
}
var lastName = $('#lastname').val();
if (!lastName) {
$('#lastname').siblings(".error").addClass('alert-on');
val = false;
}
var lastName = $('#phone').val();
if (!lastName) {
$('#phone').siblings(".error").addClass('alert-on');
val = false;
}
var input = $('#email');
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email = re.test(input.val());
if (!is_email) {
$('#email').siblings(".error").addClass('alert-on');
val = false;
}
var state = $('#state option:selected');
if (state.length == 0 || $(state).val() == "") {
$('#state').siblings(".error").addClass('alert-on');
val = false;
}
var multiselectReq = $('input[type="checkbox"]:checked').length === 0;
if (multiselectReq) {
$('#multi-select').siblings(".error").addClass('alert-on');
val = false;
}
if ($('input[type=radio][name=yesNo]:checked').length == 0) {
$('#pick-one').children(".error").addClass('alert-on');
val = false;
}
return val;
}
$(function () {
$('.myButton').prop("disabled", true);
$("input").on("keyup checked", function (e) {
e.preventDefault();
if (!$(this).val()) { $(this).siblings('.error').addClass('alert-on'); }
else { $(this).siblings('.error').removeClass('alert-on'); }
})

$('input[type="checkbox"]').click(function() {
if( $(this).prop("checked") == true) {
$('#multi-select').siblings(".error").removeClass('alert-on');
}
});

$('input[type=radio][name=yesNo]').click(function() {
if ( $(this).prop("checked") == true) {
$('#pick-one').children(".error").removeClass('alert-on');
}
});


/* if ( validateForm() === val) {
$('.myButton').prop("disabled", false);
}
else{
$('.myButton').prop("disabled", true);
} */


$("#form").submit(function (event) {
if (validateForm()) {
return;
};
event.preventDefault();
});

})


HTML

<form id="form">
<div class="">
<input type="text" placeholder="First name*" id="firstname">
<div class="error">Required</div>
</div>
<div class="">
<input type="text" placeholder="Last name*" id="lastname">
<div class="error">Required</div>
</div>
<div class="">
<input type="email" id="email" name="email" placeholder="email">
<div class="error">A valid email address is required</div>
</div>
<div class="">
<input type="text" placeholder="Phone*" maxlength="12" id="phone">
<div class="error">Required</div>
</div>
<div class="">
<select id="state" name="state">
<option selected="selected" value="">State*</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
<div class="error">Required*</div>
</div>
<div>
<div id="multi-select">
<lable>
<input id="item1" name="item1" type="checkbox">Item 1
</lable>
<lable>
<input id="item2" name="item2" type="checkbox">Item 2
</lable>
</div>
<div class="error">Required*</div>
</div>
<div id="pick-one">
<div>
<label>Yes
<input id="yes" name="yesNo" type="radio" value="Yes">
</label>
<label> No
<input id="no" name="yesNo" type="radio" value="No">
</label>
</div>
<div class="error">Required*</div>
</div>

<div id="form_submit">
<button class="myButton" type="submit">
Submit
</button>
</div>
</form>


CSS

input {
display: list-item;
margin-bottom: 10px;
}
.error {
display: none;
color: red;
}
.alert-on {
display: block;
}

.myButton{
height: 40px;
width: 90px;

}
label {
float: left;
padding:20px;
}
#multi-select {
margin-top: 20px
}
#form_submit {
width: 100%;
float:left
}

Continue reading...
 
Top