Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
stop reset of form after validation 1
- Thread starter MikeM2468
- Start date
- Thread starter
- #3
an html form is reset when a user presses a reset button (type="reset") or programmatically the reset method is being called.
one of these two things is occurring.
We can't help you much further without seeing your code. Perhaps you could provide a url to the offending page?
one of these two things is occurring.
We can't help you much further without seeing your code. Perhaps you could provide a url to the offending page?
an html form is reset when a user presses a reset button (type="reset") or programmatically the reset method is being called.
one of these two things is occurring.
We can't help you much further without seeing your code. Perhaps you could provide a url to the offending page?
one of these two things is occurring.
We can't help you much further without seeing your code. Perhaps you could provide a url to the offending page?
- Thread starter
- #6
Here is the code:
Code:
<html>
<head>
<script language="JavaScript">
<script>
function validatePhone(phonenumber) {
var rephonenumber = /^(?:\([2-9]\d{2}\)\ ?|[2-9]\d{2}(?:\-|\ ?))[2-9]\d{2}-\d{4}$/;
return rephonenumber.test(phonenumber);
}
function validateForm()
{
// Validate Phone
var phonenumber = $("#phone").val();
if (validatePhone(phonenumber)) { } else {
alert("Please enter a valid phone number, format ###-###-####");
exit();
}
return false;
}
</script>
</head>
<form method="post" onsubmit="return validateForm();">
Phone Number: <input type="text" name="phonenumber" id="phone" placeholder="###-###-####"/><br />
<input type="submit" name="Submit" value="Submit" />
</form>-
1
- #7
you were not stopping your form from submitting. so the form was not 'resetting' but the page was being refreshed.
to stop the form from resetting you must pass back boolean false. you were bailing with an exit instead, which is not the equivalent of boolean false, so the browser carried on with its default action.
Also in order to use jQuery selectors you need to have loaded jQuery. Your code does not do this.
A more jQuery compliant way of doing this is
to stop the form from resetting you must pass back boolean false. you were bailing with an exit instead, which is not the equivalent of boolean false, so the browser carried on with its default action.
Also in order to use jQuery selectors you need to have loaded jQuery. Your code does not do this.
Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
function validatePhone(phonenumber) {
var rephonenumber = /^(?:\([2-9]\d{2}\)\ ?|[2-9]\d{2}(?:\-|\ ?))[2-9]\d{2}-\d{4}$/;
return rephonenumber.test(phonenumber);
}
function validateForm(){
// Validate Phone
if (validatePhone( $("#phone").val())) {
return true;
} else {
alert("Please enter a valid phone number, format ###-###-####");
return false;
}
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return validateForm();">
Phone Number: <input type="text" name="phonenumber" id="phone" placeholder="###-###-####"/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>A more jQuery compliant way of doing this is
Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
function validatePhone(phonenumber) {
var rephonenumber = /^(?:\([2-9]\d{2}\)\ ?|[2-9]\d{2}(?:\-|\ ?))[2-9]\d{2}-\d{4}$/;
return rephonenumber.test(phonenumber);
}
$(document).ready(function(){
$('#phoneForm').on('submit', function(e){
if(validatePhone( $('#phone').val() ) ){
return true;
} else {
e.preventDefault();
alert("Please enter a valid phone number, format ###-###-####");
}
});
});
</script>
</head>
<body>
<form method="post" action="" id="phoneForm">
Phone Number: <input type="text" name="phonenumber" id="phone" placeholder="###-###-####"/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>- Thread starter
- #8
- Thread starter
- #9
I need to add one more validation to this. I need to check the phone number against MySQL to see if it exists before it gets submitted. Can I do something with ajax to call another php script to run the query and return true or false if the number is found?
- Thread starter
- #11
Most of the examples I see are running the query on keyup. I want it to run on submit after it validates the number is in the correct format. How do I create the function, call the php query, and feed the result back into the function?
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question