如何验证促销输入字段？

Question

到目前为止，我已经能够实现普通促销盒的外观。 因此，当您单击文本时，onclick function 将触发并打开输入字段和“应用”按钮，一切正常。

我想要实现的是对输入字段进行验证，如果该字段为空并且有人试图单击“应用”按钮。 它应该给出一条错误消息，说“您必须输入折扣代码”

有人能帮我吗？

 $("#promo-code").on("click", function() { $("#promo-code").hide(); $("#promo-box").show(); $("#codediv").show(); $('.trash-checkout').hide(); }); $('#applybtn').click(function() { $("#promo-box").hide(); $("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show(); $('.trash-checkout').show(); }); $('#removecode').click(function() { $(".checkout-promo-code-input").val(''); $("#codediv").html("").hide(); $('.trash-checkout').hide(); $("#promo-code").show(); }); $('#promo-code-outer').on("click", '#edit-promo-code', function() { $("#codediv").hide(); $('.trash-checkout').hide(); $("#promo-box").show(); });

 .trash-checkout { color: rgba(0, 0, 0, .7); cursor: pointer; font-size: 15px; }.trash-checkout:hover { color: #dc3545; }.promo-edit { font-weight: 600; color: rgba(0, 0, 0, .7); font-size: 15px; }.promo-edit a { color: #000000; } #promo-code { text-align: center; font-size: 15px; } #promo-box, #promo-box-mb { display: none; }

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div id="promo-code-outer"> <div class="mt-3 text-center"><a href="javascript:void(1);" id="promo-code">Apply a promo code</a></div> <div id="promo-box"> <span class="col-9 float-left pl-0 pr-0"><input type="text" class="checkout-promo-code-input" placeholder="Enter promo code"></span> <span class="col-3 float-left"><button class="btn btn-primary" id="applybtn">Apply</button></span> </div> <div class="float-left promo-edit display-none" id="codediv"></div> <div class="float-right" style="margin-left:50px;"> <span class="trash-checkout" style="display: none;"><i class="far fa-trash-alt" id="removecode"></i></span> </div> </div>

Answer 1

只需检查输入的值。

$('#applybtn').click(function() {
    if ($("#promo-box input").val()){
      $("#promo-box").hide();
      $("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show();
      $('.trash-checkout').show();
      }
      else{
      // do your error stuff
      }
    });

 $("#promo-code").on("click", function() { $("#promo-code").hide(); $("#promo-box").show(); $("#codediv").show(); $('.trash-checkout').hide(); }); $('#applybtn').click(function() { if ($("#promo-box input").val()){ $("#promo-box").hide(); $("#codediv").html("Promo code:<span><a href='javascript:void(1);' id='edit-promo-code'>" + $(".checkout-promo-code-input").val() + "</a></span>").show(); $('.trash-checkout').show(); } else{ $("#promo-box input").css("border-color", "red"); $( "#promo-box" ).append( "<p style='color: red;'>promo code is required</p>" ); } }); $('#removecode').click(function() { $(".checkout-promo-code-input").val(''); $("#codediv").html("").hide(); $('.trash-checkout').hide(); $("#promo-code").show(); }); $('#promo-code-outer').on("click", '#edit-promo-code', function() { $("#codediv").hide(); $('.trash-checkout').hide(); $("#promo-box").show(); });

 .trash-checkout { color: rgba(0, 0, 0, .7); cursor: pointer; font-size: 15px; }.trash-checkout:hover { color: #dc3545; }.promo-edit { font-weight: 600; color: rgba(0, 0, 0, .7); font-size: 15px; }.promo-edit a { color: #000000; } #promo-code { text-align: center; font-size: 15px; } #promo-box, #promo-box-mb { display: none; }

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div id="promo-code-outer"> <div class="mt-3 text-center"><a href="javascript:void(1);" id="promo-code">Apply a promo code</a></div> <div id="promo-box"> <span class="col-9 float-left pl-0 pr-0"><input type="text" class="checkout-promo-code-input" placeholder="Enter promo code"></span> <span class="col-3 float-left"><button class="btn btn-primary" id="applybtn">Apply</button></span> </div> <div class="float-left promo-edit display-none" id="codediv"></div> <div class="float-right" style="margin-left:50px;"> <span class="trash-checkout" style="display: none;"><i class="far fa-trash-alt" id="removecode"></i></span> </div> </div>