jQuery how to disable click function if input fields is empty

Question

И have some step cards where I have input fields. For each card I have a "Next" button which changes the view.

But I want to block this button if there are empty input fields in the form.

Code:

var $currentCard, $nextCard, $prevCard;

var animationEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var operationName = ["Order number", "Oparation barcode", "Nest number", "Layers number", "Cycles number"];

$('.next').on('click', function (e) {
        e.preventDefault();
        $currentCard = $(this).parent().parent();
        $nextCard = $currentCard.next();


        $('#bar li').eq($('.card').index($nextCard)).addClass('active');
        var inAnimation = 'animated slideInLeft';

        $currentCard.hide();

        $nextCard
            .show()
            .addClass(inAnimation)
            .one(animationEvents, function () {
                $(this).removeClass(inAnimation);
            });
});

$('.prev').on('click', function (e) {
    e.preventDefault();
    $currentCard = $(this).parent().parent();
    $prevCard = $currentCard.prev();

    $('#bar li').eq($('.card').index($currentCard)).removeClass('active');

    var inAnimation = 'animated slideInRight';
    $currentCard.hide();

    $prevCard
        .show()
        .addClass(inAnimation)
        .one(animationEvents, function () {
            $(this).removeClass(inAnimation);
        });
});

.title {
    margin-bottom: 30px;
    color: #020304;
}

.card {
    max-width: 500px;
    width: 90%;
    background: white;
    margin: 50px ;
    padding: 20px 30px;
    border-radius: 2px;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
}

.cardTitle {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}

.cardText {
    margin: 25px 0 40px 0;
    color: grey;
    text-align:center;
}

.card:not(:first-of-type) {
    display: none;
}

.actions {
    text-align: center;
}

.btn {
    width: 200px;
    background: #ffd42a;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    border-radius: 2px;
    padding: 10px 5px;
    margin: 10px 5px;
}

    .btn:hover {
        box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
    }

.barContainer {
    width: 100%;
    text-align: center;
}

.bar {
    counter-reset: step;
    margin: 0;
}

    .bar li {
        list-style-type: none;
        float: left;
        width: 20%;
        position: relative;
        text-align: center;
        font-size: 9px;
        color: white;
    }

@media all and (min-width: 500px) {
    .bar li {
        text-transform: uppercase;
        font-size: 10px;
    }
}

.bar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
    color: #333;
}

.bar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ffed2b;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.bar li:first-child:after {
    content: none;
}

.bar li.active:before {
    background: #ffd42a;
    border: 1px solid #ffd42a;
    color: #000;
}

.bar li.active + li.active:after {
    background: #27AE60;
}

.bar li.active:first-child + li:after:not(.active) {
    background: white;
}

.input-style {
    margin: 20px auto;
    width: 86%;
    height: 40px;
    position: relative;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

    .input-style input {
        width: 86%;
        height: 100%;
        padding: 0px 10px;
        border: none;
        font-size: 22px;
        text-align:center;
        outline: 0;
    }

  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<ul class="bar" id="bar">
                <li class="active">Register new PO</li>
                <li>Scan PO barcode</li>
                <li>Scan Operation barcode</li>
            </ul>
        </div>
        <section id="cards">
            <div class="card">
                <h3 class="cardTitle">Register new PO</h3>
                <p class="cardText">Some description</p>
                <div class="actions">
                    <a href="#" class="btn next startCO">Register new PO</a>
                </div>
            </div>
            <div class="card" id="CoStep1">
                <h3 class="cardTitle">Scan PO barcode</h3>
                <p class="cardText">Some description</p>
                <div class="input-style">
                    <input type="text" placeholder="PO barcode">
                    <div class="style"></div>
                </div>
                <div class="actions">
                    <a href="#" class="btn prev">Prev</a>
                    <a href="#" class="btn next coButton">Next</a>
                </div>
            </div>
            <div class="card" id="CoStep2">
                <h3 class="cardTitle">Scan Operation barcode</h3>
                <p class="cardText">Some description</p>
                <div class="input-style">
                    <input type="text" placeholder="Operation barcode"> <button class="plusButton">+</button>
                    <div class="style"></div>
                </div>
                <div class="actions">
                    <a href="#" class="btn prev">Prev</a>
                    <a href="#" class="btn next coButton startCO">Start CO</a>
                </div>
            </div>
        </section>

So as you can see I have a function to check if some input field is empty, by when I press Next, it's going to the next page.

What I need is pressing the Next button to validate if the input field is filled before proceeding.

Ideally, the button would initially be disabled and would become enabled when the input values are all valid. You can handle a "change" event on all the inputs and check they're all populated and valid at that point. This will also disable the button should you have valid values but then empty an input. Also, please don't just post all your code. Your question is about the enabled state of a button when some inputs are empty. Your question should have some code with some inputs and buttons - nothing more. This isn't a "make my code work" site. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented May 16, 2019 at 6:46

Carsten Løvbo Andersen · Accepted Answer · 2019-05-16 06:37:29Z

I've added this jQuery code:

if($('.POBarcode').is(":visible")){
  if($('.POBarcode').val().length == 0) return false;
}
if($('.Operation_barcode').is(":visible")){
  if($('.Operation_barcode').val().length == 0) return false;
}

I've also added a class to the following elements

<input type="text" class="POBarcode" placeholder="PO barcode">
<input type="text" placeholder="Operation barcode" class="Operation_barcode">

Now you can not press the next button before the input that is visible has a value.

Working demo

var $currentCard, $nextCard, $prevCard;

var animationEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var operationName = ["Order number", "Oparation barcode", "Nest number", "Layers number", "Cycles number"];

$('.next').on('click', function(e) {
  e.preventDefault();
  
  if($('.POBarcode').is(":visible")){
    if($('.POBarcode').val().length == 0) return false;
  }
  if($('.Operation_barcode').is(":visible")){
    if($('.Operation_barcode').val().length == 0) return false;
  }
  
  $currentCard = $(this).parent().parent();
  $nextCard = $currentCard.next();
  
  $('#bar li').eq($('.card').index($nextCard)).addClass('active');
  var inAnimation = 'animated slideInLeft';

  $currentCard.hide();

  $nextCard
    .show()
    .addClass(inAnimation)
    .one(animationEvents, function() {
      $(this).removeClass(inAnimation);
    });
});

$('.prev').on('click', function(e) {
  e.preventDefault();
  $currentCard = $(this).parent().parent();
  $prevCard = $currentCard.prev();

  $('#bar li').eq($('.card').index($currentCard)).removeClass('active');

  var inAnimation = 'animated slideInRight';
  $currentCard.hide();

  $prevCard
    .show()
    .addClass(inAnimation)
    .one(animationEvents, function() {
      $(this).removeClass(inAnimation);
    });
});

.title {
  margin-bottom: 30px;
  color: #020304;
}

.card {
  max-width: 500px;
  width: 90%;
  background: white;
  margin: 50px;
  padding: 20px 30px;
  border-radius: 2px;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.cardTitle {
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}

.cardText {
  margin: 25px 0 40px 0;
  color: grey;
  text-align: center;
}

.card:not(:first-of-type) {
  display: none;
}

.actions {
  text-align: center;
}

.btn {
  width: 200px;
  background: #ffd42a;
  font-weight: bold;
  font-size: 14px;
  color: #000;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  padding: 10px 5px;
  margin: 10px 5px;
}

.btn:hover {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.barContainer {
  width: 100%;
  text-align: center;
}

.bar {
  counter-reset: step;
  margin: 0;
}

.bar li {
  list-style-type: none;
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
  font-size: 9px;
  color: white;
}

@media all and (min-width: 500px) {
  .bar li {
    text-transform: uppercase;
    font-size: 10px;
  }
}

.bar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border: 1px solid #ddd;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  color: #333;
}

.bar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #ffed2b;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.bar li:first-child:after {
  content: none;
}

.bar li.active:before {
  background: #ffd42a;
  border: 1px solid #ffd42a;
  color: #000;
}

.bar li.active+li.active:after {
  background: #27AE60;
}

.bar li.active:first-child+li:after:not(.active) {
  background: white;
}

.input-style {
  margin: 20px auto;
  width: 86%;
  height: 40px;
  position: relative;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.input-style input {
  width: 86%;
  height: 100%;
  padding: 0px 10px;
  border: none;
  font-size: 22px;
  text-align: center;
  outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<ul class="bar" id="bar">
  <li class="active">Register new PO</li>
  <li>Scan PO barcode</li>
  <li>Scan Operation barcode</li>
</ul>
</div>
<section id="cards">
  <div class="card">
    <h3 class="cardTitle">Register new PO</h3>
    <p class="cardText">Some description</p>
    <div class="actions">
      <a href="#" class="btn next startCO">Register new PO</a>
    </div>
  </div>
  <div class="card" id="CoStep1">
    <h3 class="cardTitle">Scan PO barcode</h3>
    <p class="cardText">Some description</p>
    <div class="input-style">
      <input type="text" class="POBarcode" placeholder="PO barcode">
      <div class="style"></div>
    </div>
    <div class="actions">
      <a href="#" class="btn prev">Prev</a>
      <a href="#" class="btn next coButton">Next</a>
    </div>
  </div>
  <div class="card" id="CoStep2">
    <h3 class="cardTitle">Scan Operation barcode</h3>
    <p class="cardText">Some description</p>
    <div class="input-style">
      <input type="text" placeholder="Operation barcode" class="Operation_barcode"> <button class="plusButton">+</button>
      <div class="style"></div>
    </div>
    <div class="actions">
      <a href="#" class="btn prev">Prev</a>
      <a href="#" class="btn next coButton startCO">Start CO</a>
    </div>
  </div>
</section>

V. Sambor · Accepted Answer · 2019-05-16 08:33:26Z

0

You can do somehting like this in your next click:

if ($('input', $currentCard).val() === '' && $(this).text() !== 'Register new PO') {
   return;
}

edited May 16, 2019 at 8:33

answered May 16, 2019 at 6:39

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

2 Comments

qunz666 Over a year ago

When i wanna press to button Register it's not working

V. Sambor Over a year ago

then you can check also && button.value != register you can adapt

Collectives™ on Stack Overflow

jQuery how to disable click function if input fields is empty

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related