Recently I have been doing a bit of work with Contact Form 7 and Wordpress. I've begun looking at form validation using jQuery and I've been trying to write a script that is as efficient as possible.
I'm wondering if someone could take a look at my code here: https://jsfiddle.net/javacadabra/6mpo9h9z/4/ and let me know if I'm going about things the right way or if what I am doing is messy and bad practice.
The form operates like this at the moment:
- If an input fails the
regExcheck it adds a class callederror - If an input passes the
regExcheck it adds a class calledsuccess - If an input is empty when the form is submitted it adds a class called
empty
The form will only submit if the error class is not on any input fields and if at least one checkbox is selected. This is my submission code:
$('#get-started').submit(function(e) {
var isValid = false;
//Check at least on option is selected
var checked = $('input:checked').length > 0;
//Loop through all text fields
$("input[type='text']").each(function() {
if ($(this).hasClass('error') || $(this).val() == "") {
if ($(this).val() == "") {
empty($(this));
isValid = false;
}
isValid = false;
} else {
isValid = true;
}
});
//If everything is valid submit && checked is true
if (isValid && checked) {
return false; //for testing;
} else { //else show error
return false;
}
});
This is my regEx:
function nameCheck(name) { //Checks if a name contains letters only
var condition = new RegExp(/^[A-Za-z -]+$/);
return condition.test(name);
}
Whenever a user clicks out of an input field I check to ensure the input is valid like so:
$('input[name="first-name"]').focusout(function() {
if ($(this).val() != "") { //Only do if user has input text
var isOk = nameCheck($(this).val());
if (!isOk) { // Incorrect
incorrect($(this));
} else { // Correct
correct($(this));
}
}
});
I have 3 methods which will set the input according to the state (correct, incorrect, empty)
//Correct input
function correct(input) {
input.parent().find('.hint').hide();
input.parent().find('.fa-times').hide();
input.parent().find('.fa-check').show();
input.parent().find('.fa-exclamation').hide();
input.removeClass('error');
input.addClass('success');
input.removeClass('empty');
}
//Incorrect input
function incorrect(input) {
input.parent().find('.hint').show();
input.parent().find('.fa-times').show();
input.parent().find('.fa-check').hide();
input.parent().find('.fa-exclamation').hide();
input.addClass('error');
input.removeClass('success');
input.removeClass('empty');
}
//Empty input
function empty(input) {
input.parent().find('.hint').show();
input.parent().find('.fa-exclamation').show();
input.parent().find('.fa-check').hide();
input.parent().find('.fa-times').hide();
input.addClass('empty');
input.removeClass('error');
input.removeClass('success');
}
Basically I'd like to continue with this pattern and add more fields (some with slightly different checks on the input). However before I do I just want to be sure that I'm writing clean, maintainable code. Once I am happy with my client-side validation I am going to then implement similar checks on the server-side with PHP.
Please feel free to offer your suggestions on the above. Also this post may be helpful for anyone who is looking to implement their own custom form validation with jQuery.
Also, this is my HTML:
<div id='application-form' class='com col-md-8 form-horizontal'>
<form id='get-started' action='#' method="post">
<!-- First and Last Name -->
<div class="form-group">
<div class="col-md-6">
<label>First Name <span class='hint'>(Name can only contain letters)</span></label>
<input type="text" name="first-name" id="first-name"><i class="fa fa-times"></i><i class="fa fa-check"></i><i class="fa fa-exclamation"></i>
</div>
<div class="col-md-6">
<label>Last Name <span class='hint'>(Name can only contain letters)</span></label>
<input type="text" name="last-name" id="last-name"><i class="fa fa-times"></i><i class="fa fa-check"></i><i class="fa fa-exclamation"></i>
</div>
</div>
<!-- Options -->
<div class='form-group'>
<div class='col-md-12'>
<label>Choose an option: <span>(You must choose at least one option)</span></label>
<input type="checkbox" name="option-group[]" value="option 1" /> Option 1
<input type="checkbox" name="option-group[]" value="option 2" /> Option 2
<input type="checkbox" name="option-group[]" value="option 3" /> Option 3
</div>
</div>
<!-- Submit -->
<div class="form-group">
<div class="col-md-12">
<input type='submit' name='submit' class='apply btn btn-primary' value="Get Started" />
</div>
</div>
</form>
</div>
