Querría saber cómo deshabilitar el botón Next Section
-> <a class="btn" id="next">Next Section ▷</a>
utilizando jQuery
cuando los campos del formulario están vacíos sin importar el tipo de campo que sea input, textarea, select, radio, checkbox
entre otros, ya la validación de datos del formulario lo estoy validando con ajax
y PHP
correctamente.
Con Ajax envío y recibo la información de la siguiente manera jsfiddle y, con PHP valido la información:
if (isset($_POST['publish'])) {
$username = $_POST["username"];
$language = $_POST["language"];
if (empty($_POST['username'])){
echo json_encode(['status'=> false, 'message'=> ["username" =>"Por favor, ingrese su usuario."]]);
exit;
}
if (empty($_POST['language'])){
echo json_encode(['status'=> false, 'message'=> ["language" =>"Por favor, seleccioné su idioma."]]);
exit;
}
}
La idea de todo es darle valor al wizard
que una vez que todos los campos estén llenados entonces pasar al siguiente paso y, así sucesivamente, todo combinado con el pequeño script wizard
, más ajax
y PHP
.
Este es el código completo:
$("body").on("keyup", "form", function(e){
if (e.which == 13){
if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
e.preventDefault();
nextSection();
return false;
}
}
});
$("#next").on("click", function(e){
console.log(e.target);
nextSection();
});
$("form").on("submit", function(e){
if ($("#next").is(":visible") || $("fieldset.current").index() < 3){
e.preventDefault();
}
});
function goToSection(i){
$("fieldset:gt("+i+")").removeClass("current").addClass("next");
$("fieldset:lt("+i+")").removeClass("current");
$("li").eq(i).addClass("current").siblings().removeClass("current");
setTimeout(function(){
$("fieldset").eq(i).removeClass("next").addClass("current active");
if ($("fieldset.current").index() == 3){
$("#next").hide();
$("input[type=submit]").show();
} else {
$("#next").show();
$("input[type=submit]").hide();
}
}, 80);
}
function nextSection(){
var i = $("fieldset.current").index();
if (i < 3){
$("li").eq(i+1).addClass("active");
goToSection(i+1);
}
}
$("li").on("click", function(e){
var i = $(this).index();
if ($(this).hasClass("active")){
goToSection(i);
} else {
alert("Please complete previous sections first.");
}
});
@font-face {
font-family: 'Merriweather Sans';
font-style: normal;
font-weight: 300;
src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'), url(https://fonts.gstatic.com/s/merriweathersans/v11/2-c49IRs1JiJN1FRAMjTN5zd9vgsFH1eYCDE0hM.ttf) format('truetype');
}
@font-face {
font-family: 'Merriweather Sans';
font-style: normal;
font-weight: 700;
src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'), url(https://fonts.gstatic.com/s/merriweathersans/v11/2-c49IRs1JiJN1FRAMjTN5zd9vgsFH1OZyDE0hM.ttf) format('truetype');
}
body {
background: url(http://farm5.staticflickr.com/4139/4825532997\_7a7cd3d640\_b.jpg);
background-size: cover;
height: 100%;
font-family: 'Merriweather Sans', sans-serif;
color: #666;
}
#form {
width: 600px;
height: auto;
padding: 20px;
background: #fff;
margin: 80px auto;
position: relative;
min-height: 300px;
}
#fieldsets {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 8px;
margin-bottom: 8px;
position: relative;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
textarea:focus {
outline: none;
border: 1px solid #22918b;
}
input[type=radio] {
margin: 6px;
display: inline-block;
}
fieldset {
border: none;
position: absolute;
left: -640px;
width: 600px;
padding: 10px 0;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
opacity: 0;
}
fieldset.current {
left: 20px;
opacity: 1;
}
fieldset.next {
left: 640px;
}
input[type=submit] {
display: none;
border: none;
}
#section-tabs {
font-size: 0.8em;
height: 50px;
position: relative;
margin-top: -50px;
margin-bottom: 50px;
padding: 0;
font-weight: bold;
list-style: none;
text-transform: uppercase;
}
#section-tabs li {
color: #a7a7a7;
cursor: not-allowed;
border-left: 1px solid #aaa;
text-decoration: none;
padding: 0 6px;
float: left;
width: 25%;
box-sizing: border-box;
text-align: center;
font-weight: bold;
line-height: 30px;
background: #ddd;
position: relative;
}
#section-tabs li span {
color: #bababa;
}
#section-tabs li.active {
color: #444;
cursor: pointer;
}
#section-tabs li:after {
content: "";
display: block;
margin-left: 0;
position: absolute;
left: 0;
top: 0;
}
#section-tabs li.current {
opacity: 1;
background: #fff;
z-index: 999;
border-left: none;
}
#section-tabs li.current:after {
border: 15px solid transparent;
border-left: 15px solid #2cbab2;
}
.error {
color: #bf2424;
display: block;
}
input.error,
textarea.error {
border-color: #bf2424;
}
input.error:focus,
textarea.error:focus {
border-color: #bf2424;
}
label.error {
margin-bottom: 20px;
}
input.valid {
color: green;
}
label.valid {
position: absolute;
right: 20px;
}
input + .valid,
textarea + .valid {
display: none;
}
.valid + .valid {
display: inline;
position: absolute;
right: 10px;
margin-top: -36px;
color: green;
}
.btn {
border: none;
padding: 8px;
background: #2cbab2;
cursor: pointer;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
color: #fff;
position: absolute;
bottom: 20px;
right: 20px;
font-family: 'Merriweather Sans', sans-serif;
}
.btn:hover {
background: #26a19a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="https://formsubmit.co/misrilanka.tk@gmail.com" method="POST">
<ul id="section-tabs">
<li class="current active"><span>1.</span> Creds</li>
<li><span>2.</span> Deets</li>
<li><span>3.</span> Settings</li>
<li><span>4.</span> Last Words</li>
</ul>
<div id="fieldsets">
<fieldset class="current">
<label for="email">Email:</label>
<input name="email" type="email" class="required email" />
<label name="password" for="password">Password:</label>
<input type="password" minlength="10" class="required">
</fieldset>
<fieldset class="next">
<label for="username">Username:</label>
<input name="username" type="text">
<label for="bio">Short Bio:</label>
<textarea name="bio" class="required"></textarea>
<select name="language">
<option value="">Idioma</option>
<option value="es">Español</option>
<option value="en">Inglés</option>
</select>
</fieldset>
<fieldset class="next">
<label for="interests">Basic Interests:</label>
<textarea name="bio"></textarea>
<p>Receive newsletter?<br>
<input type="radio" name="newsletter" value="yes"><label for="newsletter">yes</label>
<input type="radio" name="newsletter" value="no"><label for="newsletter">no</label>
</p>
</fieldset>
<fieldset class="next">
<label for="referrer">Referred by:</label>
<input type="text" name="referrer">
<label for="phone">Daytime Phone:</label>
<input type="tel" name="phone">
</fieldset>
<a class="btn" id="next">Next Section ▷</a>
<input type="submit" name="publish" class="btn" id="publish">
</div>
</form>
required