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

https://jsfiddle.net/5v6Lehk5/
我试图禁用下一个按钮，直到Year，Make和Model被填写。我知道我需要使用空禁用按钮功能，但我不知道如何去做。因为表单全部在一个页面上，并使用fieldset在屏幕之间移动，所以我无法获得它的工作。第二个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; \t 
 
}

<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> 
 
      \t 
 
     
 
<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>

来源

2015-06-02 user3174196

你的小提琴与你的文章无关。 – lmgonzalves

为你修复它 – user3174196

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

另外，你的按钮应该有唯一的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; \t 
 
}

<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> 
 
      \t 
 
     
 
<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>

来源

2015-06-02 15:56:00 Todd

你可以使用HTML5表格验证。在al字段中有值的情况下，它不允许提交表单。

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/

来源

2015-06-02 15:48:09 BobDoleForPresident

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

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

来源

2015-06-02 16:04:45 Enrique

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

回答

相关问题