0

On click of "Click here and check" which is in the image. validate Size and color. If not select show validation message like [required this field.]

enter image description here

please find .phtml file

<a href="#" class="btn btn-primary btn-lg action towishlist" 
id="popupButton" data-toggle="modal" data-target="#myModal" >
<span>Click here and check</span> 
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" 
style="display:none;">
<div class="modal-dialog">
  <div class="modal-content">
    
    <div class="modal-header">
      <h4 class="modal-title"><?php echo $this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/price_drop_popup_configuration/price_drop_popup_title'); ?></h4>
    </div>
    <div class="modal-body">
      <form method="post" action="pricedropalert/index/submit">
          <input type="hidden" name="email" id="user_email" 
          value="<?php echo $block->getUserEmail(); ?>">
          <input type="hidden" name="product_id" id="proId" value="<?php echo $block->getCurrentProduct(); ?>">
          <input type="hidden" name="sku" value="<?php echo $block->getCurrentProductSku(); ?>">
          <input type="hidden" name="userId" value="<?php echo $block->getUserId(); ?>">
          <input type="hidden" name="CurrentPrice" value="<?php echo $block->getCurrentProductPrice(); ?>">
        <?php if($this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/general/desired_price')):?>
          <div class="form-group">
            <input type="number" id="desired_price" placeholder="<?php echo $this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/price_drop_popup_configuration/price_textbox_placeholder'); ?>" name="desired_price" class="input-text required-entry form-control" data-validate="{required:true}" autocomplete="off" aria-required="true" required>
          </div><br>
        <?php endif; ?>
        <div class="form-group">
          <input type="email" class="form-control" id="cookies_email" placeholder="<?php echo $this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/price_drop_popup_configuration/alert_email_placeholder'); ?>" name="email" required>
        </div><br>
          <?php if($this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/gdpr_consent/consent_checkbox')): ?>
          <div class="checkbox">
              <label><input type="checkbox" name="gdpr_consent" value="1" required> 
              <?php echo $this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/gdpr_consent/gdpr_consent'); ?>
              </label>
          </div><br>
          <?php endif; ?>
        <button type="submit" class="btn btn-default"><?php echo $this->helper('Magedelight\PriceDropAlert\Helper\Data')->getConfig('Magedelight_PriceDropAlert/price_drop_popup_configuration/drop_alert_button'); ?></button>
      </form>
    </div>
    </div>
  </div>
</div>  

 <script>
 require(
  [
    'jquery',
    'Magento_Ui/js/modal/modal'
  ],
  function(
    $,
    modal
  ) {
    var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        buttons: [{
            text: $.mage.__('Cancel'),
            class: 'mymodal1',
            click: function () {
                this.closeModal();
            }
        }]
    };
    var popup = modal(options, $('#myModal'));
    $("#popupButton").on('click',function(){
        $("#myModal").modal("openModal");
    });
});
</script>
2
  • plese share phtml file where you added "Click here and check" link
    – 26vivek
    Aug 8, 2020 at 6:22
  • please add path of phtml. share the whole process, how you get the button
    – 26vivek
    Aug 8, 2020 at 7:28

2 Answers 2

2
$("#popupButton").on('click',function(){ //Model id
    var form = $("#product_addtocart_form");
    var i = 0;
    form.find('input').each(function () {
       if($(this).attr('aria-required'))
           if(!$(this).val())
               i++;
    });
    if (!i) { //size or color is not selected yet
        $("#mymodal").modal("openModal");
    }
}
0

Hey you can use "mage/mage" js like this

require(['jquery', "mage/mage"], function($){

var dataForm = $('#form_id'); // you can find form id in <form> tag

dataForm.mage('validation', {ignore: ':hidden'}); // This will ignore Display none field to validate

if(dataForm.validation('isValid')){

// Open your popup

}

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.