jQuery如果输入字段为空，如何禁用单击功能

Question

И有一些步骤卡，我有输入字段。对于每张卡，我有一个“下一步”按钮，用于更改视图。但是如果表单中有空输入字段，我想阻止此按钮。码：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;}因此，您可以看到我有一个函数来检查某个输入字段是否为空，当我按下Next时，它将转到下一页。我需要的是按下“ 下一步”按钮以验证输入字段是否已填充，然后再继续。

Answer 1

我添加了这个jQuery代码：

if($('.POBarcode').is(":visible")){

  if($('.POBarcode').val().length == 0) return false;

}

if($('.Operation_barcode').is(":visible")){

  if($('.Operation_barcode').val().length == 0) return false;

}

我还在class以下元素中添加了一个

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

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

现在你不能按下一个按钮之前input是visible有一个value。

工作演示

Answer 2

你可以在下一次点击中做这样的事情：

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