CODEWITHSUNDEEP
javascriptjqueryhtmlformsurl-validation
hello world
hello world

Reputation: 316

Jquery validating not empty and is URL in forms

I'm using the following fiddle to create a form and check that both fields are not empty and that the second field is a valid URL. http://jsfiddle.net/nc6NW/366/

<form method=post>
     <input type="text" id='first_name'>
     <input type="url" id='second_name'>
     <input type="submit" value="Submit" id="submit" disabled>
</form>

<script>
$(':text').keyup(function() {
     if($('#first_name').val() != "" && $('#second_name').val() != "") {
           $('#submit').removeAttr('disabled');
}    else {
           $('#submit').attr('disabled', true);   
     }
});

</script>

However it only works when you return to amend the first field after adding the URL

Upvotes: 0

Views: 306

Answers (3)

Aaron K.
Aaron K.

Reputation: 344

The :text is the issue.

Update your jQuery to the below

$("input").keyup(function() {
   if($('#first_name').val() != "" && $('#second_name').val() != "") {
      $('#submit').removeAttr('disabled');
   } else {
      $('#submit').attr('disabled', true);   
   }
});

Upvotes: 2

amoghesturi
amoghesturi

Reputation: 248

The events are being triggered only on keyup of the first input field. Add a similar keyup event to the second field and it will work

Upvotes: 1

Orelsanpls
Orelsanpls

Reputation: 23565

You are listening to ':text' keyup. Because your second input is an 'url' type, it do not trigger the function.

That's why you have to go back to first input.

Upvotes: 2

Related Questions