0

i have vendor registration from but it is so simple! i want to add some tabs labeling "step1 , step2 , step3" which go to next tab only if the vendor have filled the required feild of first tab. here is the code of registration from

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$session =$objectManager-
>create('Magento\Framework\Session\SessionManager');

if($session->getVendorData())
{
  $vendorsession = $session->getVendorData();
}else
  {
$vendorsession = null;
 }

 $countryObject = $objectManager-
   >create('Magento\Directory\Model\Config\Source\Country'); 
  $countries = $countryObject->toOptionArray();
   $priceObject = $objectManager-
   >create('Magento\Framework\Pricing\Helper\Data');

  $proofCollection = $block->getProofTypes();


$dir_name = 'vendor/varifications';
$this->helper('\Medma\MarketPlace\Helper\Data')->getImagesDir($dir_name);

$total_file_upload = 0;

?>

 <div style='width:100%;float:left;margin-bottom:15px;'>
<form class="form create account form-create-account" 
   enctype="multipart/form-data" action="<?php echo $block-
 >getPostActionUrl() ?>" data-mage-init='{"validation":{}}' method="post" 
  style="display:inline-block;overflow:hidden;content-align:center;">
<fieldset class="fieldset create info">
    <legend class="legend"><span><?php echo __('Personal Information'); ?></span></legend><br>


    <div class="field firstname required">
        <label class="label" for="firstname"><span><?php echo __('First Name'); ?></span></label>
        <div class="control">
            <input type="text" id="firstname" name="firstname" onKeyDown="validate(this.id,'<?php echo __('First name'); ?>',15)" maxlength="15" value="<?php if($vendorsession['firstname']){ echo $vendorsession['firstname'];}?>" title="<?php echo __('First Name'); ?>" class="input-text required-entry" data-validate="{required:true}"  aria-required="true">
            <div class="note" id="firstnamepromptmsg"></div>
        </div>
    </div>

    <div class="field lastname required">
        <label class="label" for="lastname"><span><?php echo __('Last Name'); ?></span></label>
        <div class="control">
            <input type="text" id="lastname" name="lastname" onKeyDown="validate(this.id,'<?php echo __('Last name'); ?>',15)"  maxlength="15" value="<?php if($vendorsession['lastname']){ echo $vendorsession['lastname'];}?>" title="<?php echo __('Last Name'); ?></" class="input-text required-entry" data-validate="{required:true}" aria-required="true">
            <div class="note" id="lastnamepromptmsg"></div>
       </div>
    </div>

    <div class="field required">
        <label for="email_address" class="label"><span><?php echo __('Email Address'); ?></span></label>
        <div class="control">
            <input type="email" name="email" id="email_address"value="<?php if($vendorsession['email']){ echo $vendorsession['email'];}?>" title="<?php echo __('Email Address') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}" aria-required="true">
        </div>
    </div>

    <legend class="legend"><span><?php echo __('Business Information'); ?></span></legend><br>

    <div class="field field-name-lastname required">
        <label class="label" for="shop_name"><span><?php echo __('Shop Name'); ?></span></label>
        <div class="control">
            <input type="text" id="shop_name" name="shop_name"  onKeyDown="validate(this.id,'<?php echo __('Shop name'); ?>',20)" maxlength="20" value="<?php if($vendorsession['shop_name']){ echo $vendorsession['shop_name'];}?>" title="<?php echo __('Shop Name'); ?></" class="input-text required-entry" data-validate="{required:true}" aria-required="true">
            <div class="note" id="shop_namepromptmsg"></div>
        </div>
    </div>


    <div class="field required">
        <label for="country" class="label"><span><?php echo __('Country'); ?></span></label>
        <div class="control">
            <select name="country" id="country" title="<?php echo __('Country'); ?>"  class="input-text required-entry" data-validate="{required:true}" aria-required="true"> 
                <?php foreach($countries as $value=>$key):?>
                        <option <?php if($vendorsession['country']==$key['value']):?>selected='selected'<?php endif;?> value="<?php echo $key['value'];?>"><?php echo $key['label']; ?></option>
                <?php endforeach;?>
            </select>
        </div>
    </div>

    <div class="field field-name-lastname required">
        <label class="label" for="shop_address"><span><?php echo __('Shop address'); ?></span></label>
        <div class="control">
            <input type="text" id="shop_address" name="shop_address"  onKeyDown="validate(this.id,'<?php echo __('Shop address'); ?>',20)" maxlength="200" value="<?php if($vendorsession['shop_address']){ echo $vendorsession['shop_address'];}?>" title="<?php echo __('Shop address'); ?></" class="input-text required-entry" data-validate="{required:true}" aria-required="true">
            <div class="note" id="shop_addresspromptmsg"></div>
        </div>
    </div>
    <div class="field field-name-lastname required">
        <label class="label" for="contact_number"><span><?php echo __('Contact Number'); ?></span></label>
        <div class="control">
            <input id="contact_number" name="contact_number" value="<?php if($vendorsession['contact_number']){ echo $vendorsession['contact_number'];}?>" onKeyDown="validatenumber(this.id,'<?php echo __('Contact number') ?>',12)"  maxlength="12" title="<?php echo __('Contact Number'); ?></" class="required-entry" type="number" data-validate="{required:true}" aria-required="true">
                <div class="note" id="contactnumpromptmsg"></div>
        </div>
    </div>



    <?php if($proofCollection->getSize()>0){ 
            $total_file_upload = 1; ?>
    <legend class="legend"><span><?php echo __('Verification Proof'); ?></span></legend><br>

    <div class="field required">
        <label for="proof_type" class="label"><span><?php echo __('Proof Type'); ?></span></label>
        <div class="control">
            <select name="proof_type" id="proof_type" title="<?php echo __('Proof Type'); ?>">
                <option value="">-<?php echo __('Select'); ?>-</option>
                <?php foreach($proofCollection->getData() as $proofData):?>
                        <option <?php if($vendorsession['proof_type']==$proofData['entity_id']):?>selected='selected'<?php endif;?>   value="<?php echo $proofData['entity_id'];?>"><?php echo $proofData['name']; ?></option>
                <?php endforeach;?>
            </select>
        </div>
    </div>

    <div class="field field-name-lastname required">
        <label class="label" for="contact_number"><span><?php echo __('Files'); ?></span></label><span class="note"><?php echo __('( supported format PNG, JPEG, JPG, BMP)');?></span>
        <div id="verification_proof_container" style="padding-left:160px;">
            <div class="control">
                <input  title="<?php echo __('Files'); ?>" type="file" name="varification_proof_1" id="varification_proof_1"  class="input-text required-entry" data-validate="{required:true}" aria-required="true" />
            </div>
        </div>
    </div>



    <div class="field field-name-lastname required">
        <div class="control" style="padding-left:160px;">
            <button type="button" title="<?php echo __('Add New') ?>" class="action submit primary" onclick="addNewFileUpload()">
                <span><span><?php echo __('Add New'); ?></span></span>
            </button>
        </div>
    </div>

    <?php } ?>

    <input type="hidden" name="total_file_upload" id="total_file_upload" value="<?php echo $total_file_upload;?>">

    <legend class="legend"><span><?php echo __('Login Information'); ?></span></legend><br>

    <div class="field required">
        <label for="username" class="label"><span><?php echo __('User Name'); ?></span></label>
        <div class="control">
            <input name="username" value="<?php if($vendorsession['username']){ echo $vendorsession['username'];}?>" id="username" type="text" class="input-text" title="<?php echo __('User Name') ?>" data-validate="{required:true}" aria-required="true"> 
        </div>
    </div>

    <div class="field required">
        <label for="password" class="label"><span><?php echo __('Password'); ?></span></label>
        <div class="control">
            <input type="password" name="password" id="password" title="<?php echo __('Password') ?>" class="input-text" data-validate="{required:true}" aria-required="true">
               <div class="note" id="passwordmsg"><?php echo __('( Your password must include both numeric and alphabetic characters)');?></div>
        </div>
    </div>

    <div class="field required">
        <label for="confirmation" class="label"><span><?php echo __('Confirm Password'); ?></span></label>
        <div class="control">
            <input type="password" name="confirmation" onblur="validatepassword()" id="confirmation"  title="<?php echo __('Confirm Password') ?>" class="input-text" data-validate="{required:true}" aria-required="true"> 
            <div class="note" id="passwordmsg"></div>
        </div>
    </div>





  </fieldset>


<div class="actions-toolbar">
    <div class="primary">
        <button type="submit" class="action submit primary" title="Save"><span><?php echo __('Save'); ?></span></button>
    </div>
    <div class="secondary">
        <a class="action back" href="<?php echo $this->getUrl(); ?>"><span><?php echo __('Back'); ?></span></a>
    </div>
</div>
  </form>
        <div class="seller-login-div">
                <div class="login-content">
                         <h2 class="heading">Already Registered  as seller?</h2>
           <?php ?>
        <form action="<?php echo $this-
           >helper('\Medma\MarketPlace\Helper\Data')->getSellerUrl();?>">
        <button type="submit" class="action primary seller-login-button">Log 
       In as Seller</button>
    </form>
</div

<script type="text/javascript">
    function addNewFileUpload()
    {
        var total_file_upload = jQuery('#total_file_upload').val();
        total_file_upload = parseInt(total_file_upload)+1;

        var content = '<br><div class="control"><input  title="<?php echo __('Files'); ?>" type="file" name="varification_proof_'+total_file_upload+'" id="varification_proof_'+total_file_upload+'"  class="input-text required-entry" data-validate="{required:true}" aria-required="true" /></div>';

        jQuery('#verification_proof_container').append(content);

        jQuery('#total_file_upload').val(total_file_upload);
    }
    function validate(id,field,limit)
    {
        console.log('#'+id);
        value = jQuery('#'+id).val();
        console.log(value.length+'======='+limit);
        if(value.length==limit)
        {
        jQuery('#'+id+'promptmsg').html(field+' must contain '+limit+' characters');
        jQuery('div #'+id+'promptmsg').css('display','block');
        }
        else
        {
            jQuery('div #'+id+'promptmsg').css('display','none');
        }
    }
    function validatenumber(id,field,limit)
    {
        console.log('#'+id);
        var value = jQuery('#'+id).val();
        if (value.length>=limit) {
            console.log(value.length+'======='+limit);
            jQuery('#contactnumpromptmsg').html('Invalid contact number');
            jQuery('#contactnumpromptmsg').css('display','block');
        } else {
            jQuery('#contactnumpromptmsg').css('display','none');
        }
    }
    function validatepassword()
    {
         var password = document.getElementById("password").value;
         var confirmPassword = document.getElementById("confirmation").value;
         if (password != confirmPassword) 
         {
            jQuery('#passwordmsg').html('Passwords do not match.');
            jQuery('#passwordmsg').css('display','block');
         }
         else
         {
             jQuery('#passwordmsg').css('display','none');
         }

    }

</script>

destroy();?>

i don't have any knowledge about juery any help regarding creating tabs with validation may help me.

0

ever heard of modal? Try something like this:

http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_modal.html

<div id="model_content_1">Content goes here</div>

$('#modal_content').modal({
    <option1>: <value1>,
    <option2>: <value2>,
    ...
});
2
  • can you simple guide me to a function by which i can create tab and make it move to next step only if the first step has been filled?
    – Laiba
    Mar 7 '18 at 9:13
  • @Laiba I think you can search for key word modal in .phtml files in any m2 project and look for example. Also I dont think there is a m2 function that helps you with that b/c modal is js, not php
    – Nam
    Mar 7 '18 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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