如何在完成所有字段之前禁用下一个按钮

时间：2015-06-02 15:33:29

标签： 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>

3 个答案:

答案 0 :(得分：1)

您可以使用html5表单验证。在字段中包含值之前，它不允许提交表单。

HTML：

 <form id="form-name">
     Username<br />
 <input type="text" id="user_input" name="username" required /><br />
     Password<br />
<input type="password" id="pass_input" name="password" required /><br />
     Confirm Password<br />
<input type="password" id="v_pass_input" name="v_password" required /><br />
     Email<br />
<input type="text" id="email" name="email" required /><br />     
<input type="submit" id="register" value="submit" />

这是一个jsfiddle示例：https://jsfiddle.net/qKG5F/2152/

答案 1 :(得分：1)

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

此外，您的按钮应各自具有唯一ID。 ID不应该在一个页面内重复。

＆＃13;
＆＃13; 
/*-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();
}
＆＃13; 
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;	
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我认为您对所有按钮使用相同的id =“按钮”。正确的做法是为按钮使用不同的id，以便您可以正确地使用Jquery访问它们并禁用它们而不会发生冲突。

你的禁用代码工作正常，我认为你与ids有冲突。

相关问题
最新问题