使用Javascript停止发生表单操作

时间:2014-04-01 02:00:14

标签: javascript php jquery html

如何进行表单操作=" connect.php"停在我的职能范围内?我已经这样做了,如果输入错误,那么它会返回一个错误;但是,如果没有返回错误,那么动作=" connect.php"发生了,但我无法弄清楚如何制作动作=" connect.php"如果有错误发生。我该怎么做才能停下来,而不是去connect.php?

HTML:

<form action="connect.php" method="get" name="registerForm">
            <h3>Not a member yet? Sign Up!</h3>
            <p>Username:</p><input type="text" name="name" id="registerinput_username">
                <div id="usernamereq2"><p>Field is required.</p><img src="ximg.png" alt="x"></div>
            <p>Email:</p><input type="text" name="email" id="registerinput_email">
                <div id="emailreq"><p>Field is required.</p><img src="ximg.png" alt="x"></div>
            <p>A password will be e-mailed to you.</p>
            <input type="submit" name="submit" value="Register" id="registersubmit">
</form>

javascript和jquery:

$("#registersubmit").click(function(){
        if($("#registerinput_username").val() == "" || $("#registerinput_email").val() == "")
        {
            if($("#registerinput_username").val() == "")
            {
                $("#usernamereq2").css({
                opacity:'1'
                });

            }
            if($("#registerinput_email").val() == "")
            {
                $("#emailreq").css({
                opacity:'1'
                });
            }
        }
        if($("#registerinput_username").val() != "")
        {
            $("#usernamereq2").css({
            opacity:'0'
            });
        }
        if($("#registerinput_email").val() != "")
        {
            $("#emailreq").css({
            opacity:'0'
            });
            checkContinue();
        }
        if($("#registerinput_email").val() != "" && $("#registerinput_username").val() != "")
        {   
            validateFormRegister();
        }
    });

function validateFormRegister()
    {
        var email=document.forms["registerForm"]["email"].value;
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        var name=document.forms["registerForm"]["name"].value;
        var x=name.length;
            if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
                {
                alert("Email is invalid.");
                }
            if(x<5)
                {
                alert("Username is too short! Must be at least 5 characters.");
                }
    }

4 个答案:

答案 0 :(得分:3)

您可以使用preventDefault()来停止发生默认事件:

$("#registersubmit").click(function(e){
    e.preventDefault();

验证完成后,您可以致电.submit()提交表单。

<!-- add id attribute t form -->
<form action="connect.php" method="get" id="registerForm" name="registerForm">

// add submit() to actually submit form
$("#target").submit();

答案 1 :(得分:1)

在click事件结束时添加event.preventDeafult():

$("#registersubmit").click(function(event){
    event.preventDeafult();
)};

答案 2 :(得分:0)

您可以在页面加载时删除按钮上的submit类型,然后根据错误在buttonsubmit之间切换。

var button = $('#registersubmit');
button.prop('type','button');
var error = true;

// perform error checking
if(!error){
    button.prop('type', 'submit');
}

http://jsfiddle.net/j9SN7/

答案 3 :(得分:0)

您可以使用preventDefault停止提交。

$("#registersubmit").click(function(e){
   {form validation here}
   if(form is invalid ) 
       e.preventDefault();
   }
 }