Как отключить кнопку отправки, когда текстовое поле, выбор и дата пустые и активируются, когда его сделано

Question

Я видел много примеров людей, которые отключили кнопки, если текстовые поля пустые, но я не нашел ни одного, который отключит кнопку только для определенных текстовые поля, поля даты и выбора. Я новичок в JQuery, и я знаю, что это псевдокодировано, но вы можете получить эту идею. Какую функцию JQuery мне нужно вызвать, чтобы она постоянно проверялась? И как я могу использовать оператор or в предложении if, чтобы определить, пусто ли поле текстового поля?

HTML

<form id="myform"> 
    Username<br /> 
    <input type="text" id="user_input" name="username" /><br /> 
    Password<br /> 
    <input type="password" id="pass_input" name="password" /><br /> 
    Confirm Password<br /> 
    <input type="password" id="v_pass_input" name="v_password" /><br /> 
    Email<br /> 
    <input type="text" id="email" name="email" /><br /> 
    Birthday<br /> 
    <input type="date" id="bday" name="birthday" /><br /> 
    Sex<br /> 
    <select name="sex" id="sex"> 
    <option>Male</option> 
    <option>female</option> 
    </select> 
    <input type="submit" id="register" value="Register" disabled="disabled" /> 
</form> 

Javascript

<script type="text/javascript> 
(function() { 
    $('#myform > input').keyup(function() { 

     var empty = false; 
     $('form > input #bday').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('#register').attr('disabled', 'disabled'); 
     } else { 
      $('#register').removeAttr('disabled'); 
     } 
    }); 
})() 
</script> 

JSFIDDLE

Answer 1

Вы можете использовать on('input') и изменить ваш селектор немного:

$('#myform > input').on('input', function() { 

    var empty = false; 
    // Don't use an ID here 
    $('form > input, form > select').each(function() { 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    }); 

    if (empty) { 
     $('#register').attr('disabled', 'disabled'); 
    } else { 
     $('#register').removeAttr('disabled'); 
    } 
}); 

Fiddle

Answer 2

У вас есть чек на поле дня рождения, которое всегда заполняется из-за ввода даты.

Поэтому убедитесь, что вы проверить на других полях, как это:

$('form > input.cant_be_empty').each(function() { 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    }); 

И добавить класс cant_be_empty ко всем элементам, которые не могут быть пустыми.

http://jsfiddle.net/LM4cf/1/

Answer 3

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

<input type="text" id="user_input" name="username" required="true" /> 

Тогда JS ищет необходимые поля и проверяет, если они пусты:

(function() { 
$('#myform > input').keyup(function() { 
    var empty = false; 
    $('form > input[required="true"]').each(function(i, ele) { 
     if ($(ele).val() == '') { 
      empty = true; 
     } 
    }); 

    if (empty) { 
     $('#register').attr('disabled', 'disable'); 
    } else { 
     $('#register').removeAttr('disabled'); 
    } 
}); 
}()) 

На стороне, почему бы не попробовать эту проверку JQuery плагин Here. Вы можете выбрать, какие поля необходимы, а также подтвердить ввод пользователя перед отправкой формы (например, подтвердить адрес электронной почты).