I seem to be having an issue with the validationEngine on a new page currently under development. For some reason, on a blur event the validation works, but when I submit the form, instead of showing the errors, the pages flashes the validation error messages for every field and posts the form data instead of disabling the form submission.
<script type="text/javascript">
$(document).ready(function(){
$("#contact").validationEngine('attach',{promptPosition : "centerRight", scroll: false});
$(".about").fancybox({
'width'
: 640,
'height'
: 520,
'scrolling'
: 'no',
'autoScale'
: false,
'transitionIn'
: 'elastic',
'transitionOut'
: 'none',
'type'
: 'iframe'
});
});
</script>
The form ID is "contact" and form fields all look similar, i.e:
<input type="text" name="name" id="name" class="validate[required,custom[onlyLetterSp]]" />
What's strange is that this code was copied from another page where it works properly. The only difference that I can see in the pages is that the page under development is an HTML 5 page, with the following designation:
<!DOCTYPE html>
with the following meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="UTF-8" />
While the page it was copied from looks as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
with the following meta tags:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
It's frustrating as on their face, the code for the forms and validation look identical. Any suggestions?
Mike