I'm trying to create a simple multi step contact form that works well with screen readers and utilises the Jquery Validate plugin on each step.
I have a script that changes the focus and announces a new page for screen reader users which is working well. However, I'm having trouble working in a validation script. It's working on step 1 but is bypassed on steps 2 and 3.
There next button is also requiring two click instead of one. Can anyone tell me where I'm going wrong? Here's how I'm setting up the validation.
$(".next").click(function() {
var form = $("#contact-multi");
form.validate({
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
errorPlacement: function(error, element) {
if (element.prop('type') === 'radio' || element.prop('type') === 'checkbox') {
error.insertBefore(element.parent());
} else {
error.insertBefore(element);
}
}
});
if (form.valid() === true) { // If statement here?
}
});
Work in progress here:
