javascript - Jquery验证不为空并且是表单中的URL

Question

我正在使用下面的小提琴来创建一个表单并检查两个字段是否不为空，并且第二个字段是有效的 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>

但是，它仅在您添加 URL 后返回修改第一个字段时才有效

Answer 1

你正在听':text'keyup。因为您的第二个输入是一种'url'类型，所以它不会触发该功能。

这就是为什么你必须回到第一个输入。

Answer 2

这:text就是问题所在。

将您的 jQuery 更新为以下内容

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

Answer 3

事件仅在第一个输入字段的 keyup 时触发。将类似的 keyup 事件添加到第二个字段，它将起作用