I am trying to implement custom-type validation using JQuery.
My HTML is
<form id="register-form" method="post">
<div class="register-body">
<div class="form-group">
<label for="phnumber">Contact number</label>
<input type="text" class="form-control" required="" name="phnumber" id="phnumber" value="" required>
<span class="help-block">Please include office contact number.</span>
<div id="phone-error" class="error-box" style="color:#ff0000"></div>
</div>
</div>
<div class="register-footer">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="submit" id="submit" tabindex="4" class="form-control btn btn-login" value="Create My Account" >
</div>
</div>
</div>
</form>I have a script in my footer.php to validate as
<footer>
</footer>
<script>
$(document).ready(function() {
$('#phnumber').validate({
if (validatePhone('txtPhone')) {
$('#phone-error').html('Please enter valid phone number');
}
else {
$('#phone-error').html('');
}
});
});
function validatePhone(txtPhone) {
var a = document.getElementById(txtPhone).value;
var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
if (filter.test(a)) {
return true;
}
else {
return false;
}
}
</script>
<?php wp_footer() ?>
</body>
</html>I have JQuery in my functions.php
function tourism_script_enqueue() {
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'tourism_script_enqueue');When I click the submit button, I am expecting the message at my Form as Please enter valid phone number. But nothing comes out and all the input texts in the form disappeared.
