0

I have been looking at a few post on Stack trying to get a simple form validation working but all it does is disabled my submit button. Its meant to remove the disable once they've entered text inside the input field.

So Far

Jquery

$('input:submit').attr('disabled',true);

$('input').change(function(){
    if($('input').val() != ''){ 
        $('input:submit').attr('disabled',true);
    } else {
        $('input:submit').removeAttr('disabled');
});

HTML

<form action="send.php" method="post">
    <input id="name" name="name" type="text" required placeholder="Name"/>
    <input id="email" name="email" type="email" required placeholder="Enter a valid email address"/>
    <input name="submit" id="subscribe" type="submit" value="Subscribe for free"/>
</form>
4

5 回答 5

1

I think you need to change your statements in if-else, let me know if you are trying something different apart from this--

$('input:submit').attr('disabled',true);

        $('input').change(function(){
            if($('input').val() != ''){ 
                  $('input:submit').removeAttr('disabled');
            }else{
                $('input:submit').attr('disabled',true);
            }
        });

Fiddle- http://jsfiddle.net/UcQhw/

于 2013-07-30T08:24:01.230 回答
1

You got to swap statements in if-else block. Also use $(this) to get the source of event.

Live Demo 

  $('input:submit').attr('disabled', true);
   $('input').change(function () {
       if ($(this).val() !== '') {
           $('input:submit').attr('disabled', false);
       } else {
           $('input:submit').prop('disabled', true);
       }
   });

if you want to check that all text field must not be empty then you have to iterate through all inputs. You should assign class to get sepecific textboxes instead of getting all on page. You can use class selector to get elements by class.

Live Demo

$('input:submit').attr('disabled', true);
$('.cls').change(function () {
   blankFields = $('.cls').filter(function () {
       return this.value == '';
   });
   if (blankFields.length === 0) $('input:submit').attr('disabled', false);
   else $('input:submit').prop('disabled', true);
});
于 2013-07-30T08:24:18.863 回答
1

Hey I have refined your code a bit, and its working as you intended

JS CODE:

 $('#subscribe').attr('disabled',true);

    $('input').change(function(){
        if($('input').val() != ''){ 

             $('#subscribe').attr('disabled',false);
        }else{
             //$('input:submit').removeAttr('disabled');
         $('#subscribe').attr('disabled',true);
        }
    });

LIVE DEMO on JS Fiddle

happy Coding :)

于 2013-07-30T08:27:53.400 回答
1

Try Below code:

 //$('input:submit').attr('disabled',true);

    $('input').change(function(){
        if($('input').val() != ''){ alert(1);
             $('input:submit').attr('disabled',false);
        }else{alert(2);
             $('input:submit').attr('disabled', true);
        }
    });

Code: http://jsfiddle.net/WchJ9/

于 2013-07-30T08:32:01.050 回答
1

You should look for every input by using classes that are added to all fields that are requiered. If the user changes one of them and there is still no input, then the button while stay disabled:

jQuery:

   $('input.required').change(function(){
        if($(this).val() != ''){ 
             $(this).removeClass('required',true);
        }else{
             $(this).addClass('required',true);
        }

        //check the length to enable or disable submit
        if($(".required").length == 0){ 
             $('#subscribe').attr('disabled',false);
        }else{
             $('#subscribe').attr('disabled',true);
        }
    });

html:

 <form action="send.php" method="post">
            <input id="name" name="name" type="text" class="required" placeholder="Name" />
            <input id="email" name="email" type="email" class="required" placeholder="Enter a valid email address" />
            <input name="submit" id="subscribe" type="submit" value="Subscribe for free" />
</form>

Here is a fiddle.

However keep in mind that this solution only works with javascript enabled.

于 2013-07-30T08:38:59.080 回答