JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<select name="forwardTo" id="forwardTo" onchange="numberLineTo(this.value)">
    <option name="none" value="0">Select</option>
    <option name="MobileNo" value="3" id="MobileNo">Mobile Number</option>
    <option name="character" value="1">Character</option>
</select>
<input name="carrierAddress" type="text" id="carrierAddress">
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" onclick="numberLineTo();"/></div>

CoffeeScript

function numberLineTo(){
    $("<span class='err'></span>").insertAfter("#carrierAddress");
    if($("#forwardTo").val() =='0'){
        $("#carrierAddress").unbind("keypress").hide();
        $('.err').empty();
        $('.err').html("Please Select any option");
    }

    if( $("#forwardTo").val() =='3')
    {
        $("#carrierAddress").show();
        $('.err').empty();

        $("#carrierAddress").bind("keypress",(function (e) {
            if(e.which == ""){
                $('.err').clear();
                $("#carrierAddress").show();
                $('.err').replaceWith("Please enter your phone number");
                return true;
            }
            //if the letter is not digit then display error and don't type anything
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                //display error message
                if(!isNaN(e.which)){
                    $('.err').empty();
                    $("#carrierAddress").show();
                    $('.err').empty().replaceWith("Please provide a valid phone number");
                    return true;

                }
                return false;
                }
            })
        );
    }

    if($("#forwardTo").val() =='1'){
        $("#carrierAddress").unbind("keypress");
        $("#carrierAddress").show();
        $('span').removeClass('.err');
    }
}