【发布时间】:2016-09-16 23:33:43
【问题描述】:
您好,我通过表格查看输入是否已填写。在填写必填字段之前,我一直禁用提交按钮。但是,如果我输入必需的文本区域,即使之前的必填字段未填写,按钮也会启用。
这是一个小提琴 https://jsfiddle.net/v2to0fcw/1/
这里是标记
<form action="/contact" method="post">
<div class="form-row firstName">
<p class="form-alert">Enter a valid first name.</p>
<input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required">
</div>
<div class="form-row lastName">
<p class="form-alert">Enter a valid last name. Example: Smith</p>
<input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control">
</div>
<div class="form-row phone">
<p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p>
<input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control">
</div>
<div class="form-row email ">
<p class="form-alert">Enter a valid email. Example: person@email.com</p>
<input type="email" name="email" id="email" placeholder="Email*" required class="form-control required">
</div>
<div class="form-row">
<input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required">
</div>
<div class="form-row">
<textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea>
</div>
<input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right">
</form>
这里是jquery
$(document).ready(function()
{
(function()
{
$('.required').on('keyup change', function()
{
$('.required').each(function()
{
if (this.value == '')
{
$('#submit').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
else
{
$('#submit').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
});
})()
除非您填写所有必填字段,否则该按钮将不会启用,但如果我跳过前三个并输入消息,则该按钮已启用。怎么了?
【问题讨论】:
-
如果最后的
<input>不是空字符串,则删除按钮的disabled属性;这正是您编写代码的目的。 -
最终输入是指文本区域吗?那么如果 (this.value == '') 只针对最终输入?我也试过 if ('.required' == '')
-
问题是您每次都在循环中添加和删除属性。所以最后,它包含上次迭代的设置。
标签: javascript jquery html