CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
William Kinaan
William Kinaan

Reputation: 28819

jQuery submit a form

html code

<div id="signup">
    <form  id="suform" method="POST" action="roma/roma">
        <p>
            <label>Frist Name</label>
            <input type="text" id="sufName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" id="sulName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" id="suEmail"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Mobile Number</label>
            <input type="text" id="suMNumber"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" id="suPassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" id="suRePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

it is just six input fields to make a sign up page and this is the jQuery code to ensure that there is no input field empty, and if there is no input field empty I want to submit the form.

jQuery code

$(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount === 0){
            $(this).submit(); // submit form if no error
        }
    });
});

The code ensure that there is no input field empty, it found an empty one then an error message will appear, else should submit, but the submit doesn't work.

code

Upvotes: 2

Views: 1340

Answers (4)

The System Restart
The System Restart

Reputation: 2881

$('form').on('submit',function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    if(errorCount === 0){
        alert('done'); // just an alert to notice when everything OK [remove it]
        $this.submit(); // submit the form on success
    } else e.preventDefault(); // halt the submission on default
  });

DEMO

Upvotes: 0

Ashley Strout
Ashley Strout

Reputation: 6268

Try using $(this)[0].submit();. Using $(this) refers to the jQuery object reference to the form. I don't know what jQuery's submit() method actually does, but it clearly doesn't submit the form. Using $(this)[0] refers to the actual DOM element, which will use the standard DOM submit method, which is what you're looking for.

I'm sure you know this already, but you should use server and client side validation, because some users don't have JS and some users will purposely tamper with your form. Just a quick "Don't forget"!

Upvotes: 3

robbrit
robbrit

Reputation: 17960

Check out the jQuery validation plugin. For this you add a class = "required" for any input field that is required, and just call validation on it:

$('form').validation({
  // any options you want
});

It will also do handy things like displaying error messages, doing conditional validation, etc.

Upvotes: 3

VisioN
VisioN

Reputation: 145478

You can remove e.preventDefault() and use return insead:

$('form').on('submit', function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    return errorCount === 0;
});

DEMO: http://jsfiddle.net/h9njC/27/

Upvotes: 1

Related Questions