Question

I want make validation jquery without using from plugin, problem is here that after click on button and get alert(if field is empty) it go to url # that there is in <form action="#"....

I want if get alert(mean if field is empty) ‘input is empty’ not go to url that there is in ...action="#"..., if filed has value it go to url. i can not use from ajax call or preventDefault or window.location(Because one from field is input:file).

Example: http://jsfiddle.net/gb7nh/1/

How can fix it?

<form action="#" method="POST">
    <input type="text" name="name">
    <button id="cli">Submit</button>
</form>


$('#cli').live('click',function(e){
        //e.preventDefault();
        if($('input[type="text"]').val()=='')alert('input is empty')
})

Answer 1

Bind to form submittal instead, and return false to prevent the form from submitting.

<form action="#" method="POST" id="myform">
    <input type="text" name="name">
    <button id="cli">Submit</button>
</form>

$('#myform').submit(function() {
  var valid = true;

  $('input[type="text"]').each(function() {
    if ($(this).val().length == 0) {
      alert('A field is empty!');
      valid = false;
      return false;
    }
  });

  if (!valid) {
    return false;
  }
});