Проверка формы JQuery

Question

Я смотрел несколько сообщений в Stack, пытаясь получить простую форму проверки работоспособности, но все, что она делает, отключает мою кнопку отправки. Он предназначен для удаления отключенного, как только они ввели текст внутри поля ввода.

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> 

Answer 1

Вы должны смотреть на каждый вход, используя классы, которые добавляются ко всем областям, которые взыскательные. Если пользователь изменяет один из них и до сих пор нет входного сигнала, то кнопка в то время остаться инвалидами:

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.

Однако имейте в виду, что это решение работает только с включенным javascript.

Answer 2

Я думаю, что вы должны изменить ваши заявления в if-else, дайте мне знать, если вы пытаетесь что-то другое кроме этого -

$('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/

Answer 3

Вы должны поменять заявления, если-иначе блок. Также используйте $ (this), чтобы получить источник события.

Live Demo

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

, если вы хотите, чтобы убедиться, что все текстовое поле не должно быть пустым, то вы должны перебрать все входы. Вы должны назначить class для получения текстовых полей вместо того, чтобы получать все на странице. Вы можете использовать class selector для получения элементов по классам.

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

Answer 4

Эй, я очистил ваш код немного, и его работы, как вы хотели

JS код:

$('#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 на JS Fiddle

счастливого Coding :)

Answer 5

Try Ниже код:

//$('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); 
     } 
    }); 

Код: http://jsfiddle.net/WchJ9/