JavaScript电子邮件验证代码问题（仍在提交表单）

Question

I have added some javascript to my form to validate the email before submitting the form. I dont want a seperate button to validate, i want it to be part of the form submit button. It works currently and a message comes up asking me to put a valid email address in. The problem is when i click "ok" it still tries to submit the form (and fails) instead of returning to the form to correct the email addres.

My Javascript:

<script language="javascript">

function checkEmail() {

var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
 }
}</script>

My HTML:

<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:checkEmail();' />

I cant figure out what the problem is. Any help would be appreciated. Cheers

Answer 1

只需在函数调用之前添加return即可：

<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:return checkEmail();' />

Answer 2

Try this:

HTML:

<form name="whatever" action="action.asp" onsubmit="return validateForm()" method="post">
    <input type="text" name="email" id="txtEmail" />
    <input type="SUBMIT" class="button" value="Submit Email" />
</form>

JS (pseudocode)

function validateForm()
{
    if (something) {
        alert('validation failed');
        return false;
    }
}

Answer 3

Here is the rework of your code.

<script type="text/javascript">
    function checkEmail() {
        var email = document.getElementById('txtEmail');
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if (!filter.test(email.value)) {
            alert('Please provide a valid email address');
            email.focus;
            return false;
        }
    }
</script>

<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='checkEmail();' />

Works as expected.

Answer 4

There is not a major problem, the function is working fine but it is not returning back, just add return before you call the function, here is the example below:

    <input type="SUBMIT" class="button" value="mail" onclick='Javascript:return  checkEmail();' />

This will sort out your problem, enjoy :)