Stop form action from occuring by using Javascript

Question

How do I make the form action="connect.php" stop within my function? I've made it so if something is entered incorrectly, then it returns an error;however, if no error is returned then the action="connect.php" takes place, but I can't figure out how to make the action="connect.php" take place if there is an error. How can I make it so it stops, and does not go to 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 and 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.");
                }
    }

John Conde · Accepted Answer · 2014-04-01 02:02:04Z

4

You can use preventDefault() to stop a defult event from occurring:

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

When your validation is complete you can then call .submit() to submit the form.

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

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

answered Apr 1, 2014 at 2:02

John Conde

220k100 gold badges464 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pj013 · Accepted Answer · 2014-04-01 02:04:26Z

1

Add event.preventDeafult() at the end of the click event:

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

answered Apr 1, 2014 at 2:04

pj013

1,4291 gold badge12 silver badges31 bronze badges

Comments

haxxxton · Accepted Answer · 2014-04-01 02:12:39Z

0

you could remove the submit type on your button on page load and then toggle it between button and submit based upon error.

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

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

http://jsfiddle.net/j9SN7/

answered Apr 1, 2014 at 2:12

haxxxton

6,4423 gold badges29 silver badges61 bronze badges

Comments

krozero · Accepted Answer · 2014-04-01 02:17:17Z

0

you can use preventDefault to stop submit.

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

answered Apr 1, 2014 at 2:17

krozero

6,5253 gold badges23 silver badges34 bronze badges

Collectives™ on Stack Overflow

Stop form action from occuring by using Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related