javascript - 如何禁用下一步按钮，直到完成所有字段

标签 javascript jquery forms

https://jsfiddle.net/5v6Lehk5/
我试图禁用下一个按钮，直到填写年份、品牌和型号。我知道我需要使用“如果为空禁用按钮功能”，但我不知道如何去做。因为表单全部在一页上并使用 fieldset 在屏幕之间移动，所以我无法让它正常工作。第二个字段集工作正常，因为在填写所有字段之前您无法提交表单，但他们看不到第一个字段集。所以我想禁用下一个按钮，直到填写完 3 个字段

         (function() {
          $('form > input').keyup(function() {

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

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


  /*-form nav-*/
var interval = undefined;
$(document).ready(function () {
    $('.next').on('click', getNext);
    $('.previous').on('click', getPrev);
});

function getNext() {
    var $curr = $('fieldset:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('fieldset').first();

    transition($curr, $next);
}

function getPrev() {
    var $curr = $('fieldset:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('fieldset').last();
    transition($curr, $next);
}

function transition($curr, $next) {
    clearInterval(interval);
    $curr.hide();
    $next.show();
}
fieldset {
padding:0!important; 
margin:0 !important;
border: 0;
}
fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#content {
display:table;
width:100%;
margin-top:-10px;
padding-bottom:250px; /* Height of the footer element */
}
#holder{
opacity: 1.0;
margin: 0 auto;
border: 2px solid #174570;
background-color: #1F75BA;
width: 525px;
display:table;
}
#centhold{
background-color: white;
padding: 10px;
margin:-10 -15 0 -15;
width:100%;
display:table;
}
#cent{
font-weight: bold;
font-size:35px;
width:100%;
margin: 0 auto;
text-align:center;
color:#1F75BA;
margin-bottom: 10px;
display:table;
}
#cent2{
font-weight: bold;
font-size:25px;
width:100%;
margin: 0 auto;
text-align:center;
color:#1F75BA;
display:table;
}
#sect{
width: 75%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 12px;
display:table;
}
#left{
color:white;
float:left;
width:210px;
}
#right{
width:160px;
float:right;
}
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
border-radius: 5px;
padding: 3px 18.5px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #F0F8FF;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #0594CF;
background-image: -moz-linear-gradient(top,,#0594CF);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#0594CF));
background-image: -webkit-linear-gradient(top,,#0594CF);
background-image: -o-linear-gradient(top,,#0594CF);
background-image: linear-gradient(to bottom,,#0594CF);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #0594CF #0594CF #0594CF;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #0594CF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#0594CF;/*selected */
}

input[type="text"] {
padding:2px;
width:160px;
height:28px;
border: 1px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
 }
select{
height:29px;
width:165px;
padding:2px;
border: 1px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
}
textarea {
padding:2px;
border: px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height:100px;
width:160px;
}
#but{
float:right;
margin-top:10px;
margin-right:66px;
width:75%;
position:relative;
}
.action-button {
float:right;
margin-right:10px;
margin-left:5px;
text-transform: capitalize;
width:145px;
height:37px;
background: #90b652;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 6px;
cursor: pointer;
padding: 10px 5px;
margin: 7px 13px;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="auto" method="post" action=""/>
<input type="hidden" name="token" value="<?php echo $token; ?>" />

<fieldset>

<div id="holder">

<div id="sect">
<div id="left">Year</div>
<div id="right">
<input type="text" name="year" class="input" maxlength="4">
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Make</div>
<div id="right"><input type="text" name="make" class="input">
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Model</div>
<div id="right"><span id="sprytextfield7"><input type="text" name="model" class="input">
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->



<div id="sect">
<div id="left">vehicles</div>
<div id="right"><span id="sprytextfield7">
<select class="carnum" name="carnum"> 
<option value="none" selected="selected">Select</option>
<option value="1" >1 vehicle</option>
<option value="2" >2 vehicles</option>
<option value="3" >3 vehicles</option>
<option value="4" >4 vehicles</option>
<option value="5" >5 vehicles</option>
<option value="6" >More than 5 vehicles</option>

</select>
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->

<div id="but">
<input type="button" name="next" class="next action-button" value="Next" id="button" />
</div><!--but-->
</div><!--holder-->

</fieldset> 





<fieldset>

<div id="centhold">
<div id="cent">Let us know how to contact you.</div>
</div>
<div id="holder">


<div id="sect">
<div id="left">First and Last Name</div>
<div id="right">
<span id="sprytextfield7">
<input name="name" type="text" class="input" maxlength="50">
<div id="error"><span class="textfieldRequiredMsg">Name is required.</span><span class="textfieldInvalidFormatMsg">Name is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Street Address</div>
<div id="right">
<span id="sprytextfield4">
<input type="text" name="addy" class="input">
<div id="error"><span class="textfieldRequiredMsg">Address is required.</span><span class="textfieldInvalidFormatMsg">Address is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Zip Code</div>
<div id="right">
<span id="sprytextfield3">
<input type="text" name="zip" class="input" maxlength="5">
<div id="error"><span class="textfieldRequiredMsg">Zip Code is required.</span><span class="textfieldInvalidFormatMsg">Zip Code is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">City</div>
<div id="right">
<span id="sprytextfield6">
<input type="text" name="city" class="input" maxlength="50">
<div id="error"><span class="textfieldRequiredMsg">City is required.</span><span class="textfieldInvalidFormatMsg">City is Invalid.</span></span></div>
</div>
</div><!--sect-->


<div id="sect">
<div id="left">State</div>
<div id="right"><span id="sprytextfield7">
<select class="state" name="state"> 
<option value="none" selected="selected">Select</option>
<option value="Illinois" >Illinois</option>
<option value="Indiana" >Indiana</option>
<option value="Kentucky" >Kentucky</option>
<option value="Michigan" >Michigan</option>
<option value="Ohio" >Ohio</option>
</select>
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->



<div id="sect">
<div id="left">Phone Number</div>
<div id="right"><span id="sprytextfield2">
<input type="text" name="phone" class="input" placeholder="EX:614-222-2222"><br/>
<div id="error"><span class="textfieldRequiredMsg">Phone Number is required.</span><span class="textfieldInvalidFormatMsg">Format: (890)123-4567</span></span></div></div>
</div><!--sect-->

<div id="sect">
<div id="left">Email Address</div>
<div id="right"><span id="sprytextfield1">
<input type="text" name="email" class="input">
<div id="error"><span class="textfieldRequiredMsg">E-mail is Required.</span><span class="textfieldInvalidFormatMsg">E-mail is Invalid.</span></span></div></div>
</div><!--sect-->


<div id="sect">
<div id="left">Preferred method of contact</div>
<div id="right">
<span id="sprytextfield7">
<input type="radio" id="radio1" name="contact" value="PHONE" checked>
  <label for="radio1">PHONE</label>
         	
        
<input type="radio" id="radio2" name="contact" value="email">
  <label for="radio2">EMAIL</label>

<div id="error"><span class="textfieldRequiredMsg">Zip Code is required.</span><span class="textfieldInvalidFormatMsg">Zip Code is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Comments</div>
<div id="right"><textarea name="comments"  class="comments" id="comments" placeholder="comments"></textarea></div>
</div><!--sect-->

<div id="but">
<input type="submit" name="submit" class="submit action-button" value="SAVE ME MONEY!" id="button" />
<input type="button" name="previous" class="previous action-button" value="Previous" id="button" />
</div><!--but-->
</div><!--holder-->

</fieldset>

</form>

最佳答案

一个更简单的解决方案是在按下按钮时进行验证，而不是禁用该按钮。我已经更新了您的代码片段说明:它做了一个简单的检查 - 如果所有字段都已填写，则进行导航，如果没有，则弹出一条消息，指示用户填写每个字段。

此外，每个按钮都应该有唯一的 ID。 ID 绝不能在单个页面内重复。

/*-form nav-*/
var interval = undefined;
$(document).ready(function () {
    $('.next').on('click', getNext);
    $('.previous').on('click', getPrev);
});

function getNext() {
    var $curr = $('fieldset:visible'),
        empty = false
        $next = ($curr.next().length) ? $curr.next() : $('fieldset').first();
  
    $curr.find('input[type!=button]').each(function() {
      if ($(this).val() == '') {
                empty = true
      }
    });
  
    if (!empty) {
      transition($curr, $next);
    } else {
      alert('Please fill out all fields!');
    }
}

function getPrev() {
    var $curr = $('fieldset:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('fieldset').last();
    transition($curr, $next);
}

function transition($curr, $next) {
    clearInterval(interval);
    $curr.hide();
    $next.show();
}
fieldset {
padding:0!important; 
margin:0 !important;
border: 0;
}
fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#content {
display:table;
width:100%;
margin-top:-10px;
padding-bottom:250px; /* Height of the footer element */
}
#holder{
opacity: 1.0;
margin: 0 auto;
border: 2px solid #174570;
background-color: #1F75BA;
width: 525px;
display:table;
}
#centhold{
background-color: white;
padding: 10px;
margin:-10 -15 0 -15;
width:100%;
display:table;
}
#cent{
font-weight: bold;
font-size:35px;
width:100%;
margin: 0 auto;
text-align:center;
color:#1F75BA;
margin-bottom: 10px;
display:table;
}
#cent2{
font-weight: bold;
font-size:25px;
width:100%;
margin: 0 auto;
text-align:center;
color:#1F75BA;
display:table;
}
#sect{
width: 75%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 12px;
display:table;
}
#left{
color:white;
float:left;
width:210px;
}
#right{
width:160px;
float:right;
}
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
border-radius: 5px;
padding: 3px 18.5px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #F0F8FF;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #0594CF;
background-image: -moz-linear-gradient(top,,#0594CF);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#0594CF));
background-image: -webkit-linear-gradient(top,,#0594CF);
background-image: -o-linear-gradient(top,,#0594CF);
background-image: linear-gradient(to bottom,,#0594CF);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #0594CF #0594CF #0594CF;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #0594CF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#0594CF;/*selected */
}

input[type="text"] {
padding:2px;
width:160px;
height:28px;
border: 1px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
 }
select{
height:29px;
width:165px;
padding:2px;
border: 1px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
}
textarea {
padding:2px;
border: px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height:100px;
width:160px;
}
#but{
float:right;
margin-top:10px;
margin-right:66px;
width:75%;
position:relative;
}
.action-button {
float:right;
margin-right:10px;
margin-left:5px;
text-transform: capitalize;
width:145px;
height:37px;
background: #90b652;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 6px;
cursor: pointer;
padding: 10px 5px;
margin: 7px 13px;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="auto" method="post" action=""/>
<input type="hidden" name="token" value="<?php echo $token; ?>" />

<fieldset>

<div id="holder">

<div id="sect">
<div id="left">Year</div>
<div id="right">
<input type="text" name="year" class="input" maxlength="4">
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Make</div>
<div id="right"><input type="text" name="make" class="input">
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Model</div>
<div id="right"><span id="sprytextfield7"><input type="text" name="model" class="input">
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->



<div id="sect">
<div id="left">vehicles</div>
<div id="right"><span id="sprytextfield7">
<select class="carnum" name="carnum"> 
<option value="none" selected="selected">Select</option>
<option value="1" >1 vehicle</option>
<option value="2" >2 vehicles</option>
<option value="3" >3 vehicles</option>
<option value="4" >4 vehicles</option>
<option value="5" >5 vehicles</option>
<option value="6" >More than 5 vehicles</option>

</select>
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->

<div id="but">
<input type="button" name="next" class="next action-button" value="Next" id="button1" />
</div><!--but-->
</div><!--holder-->

</fieldset> 





<fieldset>

<div id="centhold">
<div id="cent">Let us know how to contact you.</div>
</div>
<div id="holder">


<div id="sect">
<div id="left">First and Last Name</div>
<div id="right">
<span id="sprytextfield7">
<input name="name" type="text" class="input" maxlength="50">
<div id="error"><span class="textfieldRequiredMsg">Name is required.</span><span class="textfieldInvalidFormatMsg">Name is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Street Address</div>
<div id="right">
<span id="sprytextfield4">
<input type="text" name="addy" class="input">
<div id="error"><span class="textfieldRequiredMsg">Address is required.</span><span class="textfieldInvalidFormatMsg">Address is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Zip Code</div>
<div id="right">
<span id="sprytextfield3">
<input type="text" name="zip" class="input" maxlength="5">
<div id="error"><span class="textfieldRequiredMsg">Zip Code is required.</span><span class="textfieldInvalidFormatMsg">Zip Code is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">City</div>
<div id="right">
<span id="sprytextfield6">
<input type="text" name="city" class="input" maxlength="50">
<div id="error"><span class="textfieldRequiredMsg">City is required.</span><span class="textfieldInvalidFormatMsg">City is Invalid.</span></span></div>
</div>
</div><!--sect-->


<div id="sect">
<div id="left">State</div>
<div id="right"><span id="sprytextfield7">
<select class="state" name="state"> 
<option value="none" selected="selected">Select</option>
<option value="Illinois" >Illinois</option>
<option value="Indiana" >Indiana</option>
<option value="Kentucky" >Kentucky</option>
<option value="Michigan" >Michigan</option>
<option value="Ohio" >Ohio</option>
</select>
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->



<div id="sect">
<div id="left">Phone Number</div>
<div id="right"><span id="sprytextfield2">
<input type="text" name="phone" class="input" placeholder="EX:614-222-2222"><br/>
<div id="error"><span class="textfieldRequiredMsg">Phone Number is required.</span><span class="textfieldInvalidFormatMsg">Format: (890)123-4567</span></span></div></div>
</div><!--sect-->

<div id="sect">
<div id="left">Email Address</div>
<div id="right"><span id="sprytextfield1">
<input type="text" name="email" class="input">
<div id="error"><span class="textfieldRequiredMsg">E-mail is Required.</span><span class="textfieldInvalidFormatMsg">E-mail is Invalid.</span></span></div></div>
</div><!--sect-->


<div id="sect">
<div id="left">Preferred method of contact</div>
<div id="right">
<span id="sprytextfield7">
<input type="radio" id="radio1" name="contact" value="PHONE" checked>
  <label for="radio1">PHONE</label>
         	
        
<input type="radio" id="radio2" name="contact" value="email">
  <label for="radio2">EMAIL</label>

<div id="error"><span class="textfieldRequiredMsg">Zip Code is required.</span><span class="textfieldInvalidFormatMsg">Zip Code is Invalid.</span></span></div>
</div>
</div><!--sect-->

<div id="sect">
<div id="left">Comments</div>
<div id="right"><textarea name="comments"  class="comments" id="comments" placeholder="comments"></textarea></div>
</div><!--sect-->

<div id="but">
<input type="submit" name="submit" class="submit action-button" value="SAVE ME MONEY!" id="button2" />
<input type="button" name="previous" class="previous action-button" value="Previous" id="button3"/>
</div><!--but-->
</div><!--holder-->

</fieldset>

</form>

关于javascript - 如何禁用下一步按钮，直到完成所有字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30600430/

上一篇：javascript - 仅显示一次 Bootstrap 弹出窗口

下一篇：javascript - Controller 之间的变量名称和数据的奇怪行为

相关文章：

jQuery 和图像 slider /缩放效果

jquery - 使用 jQuery Validate 一次检查表单的各个部分

javascript - 我收到 WARN : IntentDialog - no intent handler found for null when I fill out a form Node. js Bot 框架

javascript - 如何使用地理位置获取城市名称并重定向到该城市的 URL？

javascript - 为什么 Angular-debounce 在 v1.3.0 中被破坏了？

javascript - 将属性 javascript 合并到新对象中

javascript - 在 req.body 中接收两个对象

javascript - 将值从 Bootstrap 模态传递到触发该值的按钮？

javascript - 如何使 jQuery .slideToggle() 看起来是滑动而不是折叠？

forms - ExtJS 组合加载和禁用

©2024 IT工具网  联系我们