Javascript function showing pop up error but form still submitting

I have a form on an asp.net page

in one textbox I enter a number which should be in the form
aaa-aaa-123456789

I am using the following javascript function at thr onclientclick() event of the submit button

function validatenumber() {
var referencecode = document.getElementById('<%=txtreferencecode.ClientID %>').value;
var result = referencecode.match(/[A-Za-z]{3}-[A-Za-z]{3}-[0-9]{9}/)
if (!result) {
alert("Please enter a valid Quote Reference Number!");
return false;
}
}

Now when the button is pressed the pop up is shown with the error message but the page still goes into the server side code and
form is submited . Can someone tell me the solution for this
rohitjgc1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dimmergeekCommented:
Instead of using the onclick of your submit button, use the onsubmit event of your form to call your validation function.
If the script returns false then the form will not submit.

onsubmit form event described
0
leakim971PluritechnicianCommented:
if you've : onclick="validatenumber()"
Use the following instead : onclick="return validatenumber();"

function validatenumber() {
    var referencecode = document.getElementById('<%=txtreferencecode.ClientID %>').value;
    var result = referencecode.match(/[A-Za-z]{3}-[A-Za-z]{3}-[0-9]{9}/)
    if (!result) {
        alert("Please enter a valid Quote Reference Number!");
        return false;
    }
    return true;
}

Open in new window

0
Michel PlungjanIT ExpertCommented:
But still use the submit event
0
RobOwner (Aidellio)Commented:
I would go with the form's onsubmit event as you are wanting this to occur on submitting the form:

<form onsubmit='return validatenumber()>

Open in new window


Remember that .match() returns an array or null so you may also want to validate that rather than checking with !

eg.

if (result !== null) {
...
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Monica PSoftware DeveloperCommented:
If you are using ASPX page then try like below ., it will help

 <asp:Button ID="btnNo" runat="server" Text="Submit" 
OnClientClick="return validatenumber()" />

Open in new window


Make use the keyword "return" in function call
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Frameworks

From novice to tech pro — start learning today.