jQuery: call the action's form after calling preventDefault()

Question

The code below shows an error message when a field is not filled.

As you can see I'm calling preventDefault(), but...how to call the action associated to the form if the field has been filled??

$('input#save').click(function(e){
  e.preventDefault()

  if($('#field_1').val() == ''){

    $('#error_file').show();

  }
});

Consider using the [jQuery Validation plugin](http://docs.jquery.com/Plugins/validation) instead of rolling your own. — Matt Ball, Aug 02 '11 at 16:54

score 2 · Accepted Answer · answered Aug 02 '11 at 16:53

2

$('input#save').click(function(e){
  e.preventDefault()

  if($('#field_1').val() == ''){

    $('#error_file').show();

  }
  else 
  {
     $('#my_form').submit();
  }
});

answered Aug 02 '11 at 16:53

Maverick

3,021
6
24
35

Alternately, `$(this).closest('form').submit();` – Matt Ball Aug 02 '11 at 16:55
No need to traverse if he's already referencing `input#save` though. If he had selected `input.save` then I would definitely agree with the use of `closest()` – Maverick Aug 02 '11 at 17:00
1

@Matt, a bit expensive.. since it is an `input` element inside a `form`, then `this.form.submit()` will do .. – Gabriele Petrioli Aug 02 '11 at 17:04

score 0 · Answer 2 · answered Oct 09 '13 at 11:11

The issue here is where you've placed e.preventDefault(). You only want to prevent default if the validation fails, so just move it inside the if condition.

$('input#save').click(function(e){
    if($('#field_1').val() == ''){
        e.preventDefault();
        $('#error_file').show();
    }
});

jQuery: call the action's form after calling preventDefault()

2 Answers2

Linked