I am trying to validate my form phone field to prevent users from entering the same numbers in my javascript.
If the number provided by the user matches with the same numbers in my javascript, They will get a warning and the form would not submit.
However, I noticed that my code below shows the warning whether the numbers match or not.
I need corrections to know what I am doing wrong. Thanks.
Code below;
$('.validate').hide();
$('body').on('blur', '#phone', function() {
$('.validate').hide();
isphone($(this).val());
});
function isphone(phone) {
if (phone === "1234" || phone === "23456"){
$(".validate").show();
} else {
$(".validate").hide();
}
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form action='' method='POST' id="submitForm" >
<input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000"/>
<div ><span style="color: red;"><b>Please enter a valid phone!</b></span></div>
<button href='/' type='submit' id="submitForm">Process</button>
</form>
CodePudding user response:
I believe this should work.
I move the changes for hiding and showing $('.validate')
to the isphone
function, and removed that done
variable that wasn't doing anything useful (used if...else
instead).
Also, don't use document.getElementById
if you're already using JQuery.
$('.validate').hide();
$('body').on('blur', '#phone', function() {
$('.validate').hide();
isphone($(this).val());
});
function isphone(phone) {
if (phone === "1234" || phone === "23456"){
$(".validate").hide();
} else {
$(".validate").show();
}
}