CODEWITHSUNDEEP
javascriptjquery
Jennifer Anthony
Jennifer Anthony

Reputation: 2277

If was not alert go to url else do not go

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')
})

Upvotes: 1

Views: 404

Answers (4)

Rene Pot
Rene Pot

Reputation: 24815

This should do the trick for you:

<button id="cli" onclick="return clickButton();">Submit</button>

And it's corresponding JavaScript

function clickButton(){
    if($('input[type="text"]').val()==''){
        alert('input is empty');
        return false;        
    }
}

Upvotes: 1

Elliot Nelson
Elliot Nelson

Reputation: 11557

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;
  }
});

Upvotes: 1

user750158
user750158

Reputation: 163

I wolud do it like Elliot. Only i would have used: 

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

$('#myform').submit(function() {
   if (!$('input[type="text"]').val()) {
     alert('input is empty');
      return false;
   }
});

This. 

if (!$('input[type="text"]').val())

Instead of:

if ($('input[type="text"]').val()=='')

Upvotes: 0

Samich
Samich

Reputation: 30145

Probably you need to return false in case when you show alert woth errors:

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

});

Code: http://jsfiddle.net/gb7nh/2/

Upvotes: 0

Related Questions