Contact Number With Country Code

Contact number with country code option

Directory

File	Folder Link
form.php	\\SYNAS\Allan\DOCUMENTATION\Component\Contact Number With Country Code\rckuc\wolf\app\views\price_package
style.css	\\SYNAS\Allan\DOCUMENTATION\Component\Contact Number With Country Code\rckuc\wolf\admin\themes\black_and_white
price_package.js	\\SYNAS\Allan\DOCUMENTATION\Component\Contact Number With Country Code\rckuc\wolf\admin\javascript

Step 1

Update: form.php (or your create.php and view.php)

<h3><?php echo __('Contact Number '); ?></h3>
<div class="contact_container">
    <select class="textbox country_code_option" name="price_package[contact_country_code]">
        <?php $phone_country_codes = Option::findByCategory("phone_country_code"); ?>
        <option value=""></option>
        <?php foreach ($phone_country_codes as $code) { ?>
            <option value="<?php echo $code->code?>" data-name="<?php echo $code->name?>" data-code="<?php echo $code->code?>" <?php echo $code->code == "+60" ? "selected" : "";?>><?php echo $code->code?></option>
            <?php } ?>
        </select>
    <span class="contact_number_validation">
        <input id="contact_input" name="price_package[contact_number]" placeholder="Number" size="40" class="textbox" type="text"/>
        <p>*Number Invalid</p>
    </span>
</div>

<!-- Remember insert 'contact_country_code' & 'contact_number' in Database Table -->

<h3><?php echo __('Contact Number '); ?></h3>
<div class="contact_container">
    <select class="textbox country_code_option" name="price_package[contact_country_code]">
        <?php $phone_country_codes = Option::findByCategory("phone_country_code"); ?>
        <option value=""></option>
        <?php foreach ($phone_country_codes as $code) { ?>
            <option value="<?php echo $code->code?>" data-name="<?php echo $code->name?>" data-code="<?php echo $code->code?>" <?php echo $code->code == "+60" ? "selected" : "";?>><?php echo $code->code?></option>
            <?php } ?>
        </select>
    <span class="contact_number_validation">
        <input id="contact_input" name="price_package[contact_number]" placeholder="Number" size="40" class="textbox" type="text"/>
        <p>*Number Invalid</p>
    </span>
</div>

<!-- Remember insert 'contact_country_code' & 'contact_number' in Database Table -->

Step 2

Update: style.css

  .contact_container {
    display: flex;
  }

  .country_code_option {
    width: 100px;
    height: 27px;
    border-right: none;
    margin: 0;
  }

  .contact_number_validation p {
    color: red;
    display: none;
    margin: 0 3px;
  }

  .contact_container {
    display: flex;
  }

  .country_code_option {
    width: 100px;
    height: 27px;
    border-right: none;
    margin: 0;
  }

  .contact_number_validation p {
    color: red;
    display: none;
    margin: 0 3px;
  }

Step 3

Update: price_package.js (or any module js file)

// To make Country Code option shorter
$(document).on("mousedown focus", "select.country_code_option", function() {
    $(this).find("option").each(function() {
        let name = $(this).attr('data-name');
        if (name) $(this).text(name);
    });
});

$(document).on("change focusout", "select.country_code_option", function() {
    $(this).find("option").each(function() {
        let code = $(this).attr('data-code');
        if (code) $(this).text(code);
    });
});


// Validate Contact Number
function showContactAlert (condition, textbox) {
    let invalid_alert = textbox.parent().find("p");
    if (textbox.val() == "") {
        invalid_alert.hide();
        textbox.removeClass("error");
        textbox.parent().find("i.error").remove();
    } else {
        if (condition) {
            invalid_alert.hide();
            textbox.removeClass("error");
            textbox.parent().find("i.error").remove();
        } else {
            invalid_alert.show();
            if (!textbox.hasClass("error")) {
                $(warning_sign).insertAfter(textbox);
                textbox.addClass("error");
            }
        }
    }
}

$(document).on("keyup", "#contact_input", function() {
    let numberPattern = /^\d+$/;
    let condition = numberPattern.test($(this).val());
    showContactAlert (condition, $(this));
})

// To make Country Code option shorter
$(document).on("mousedown focus", "select.country_code_option", function() {
    $(this).find("option").each(function() {
        let name = $(this).attr('data-name');
        if (name) $(this).text(name);
    });
});

$(document).on("change focusout", "select.country_code_option", function() {
    $(this).find("option").each(function() {
        let code = $(this).attr('data-code');
        if (code) $(this).text(code);
    });
});


// Validate Contact Number
function showContactAlert (condition, textbox) {
    let invalid_alert = textbox.parent().find("p");
    if (textbox.val() == "") {
        invalid_alert.hide();
        textbox.removeClass("error");
        textbox.parent().find("i.error").remove();
    } else {
        if (condition) {
            invalid_alert.hide();
            textbox.removeClass("error");
            textbox.parent().find("i.error").remove();
        } else {
            invalid_alert.show();
            if (!textbox.hasClass("error")) {
                $(warning_sign).insertAfter(textbox);
                textbox.addClass("error");
            }
        }
    }
}

$(document).on("keyup", "#contact_input", function() {
    let numberPattern = /^\d+$/;
    let condition = numberPattern.test($(this).val());
    showContactAlert (condition, $(this));
})

Component

Module

Contact Number With Country Code

Directory

Step 1

Step 2

Step 3