Validation of text box according to selected radio button

Question

I have single text box and two radio buttons like Ip and domain, I want to validate text box according to radio button selected:

<body>
    <form action="" method="post">


        <input type="radio" id="ip" name="radio_options" value="option1">
        <label for="option1">IP</label><br>

        <input type="radio" id="domain" name="radio_options" value="option2">
        <label for="option2">Domain</label><br>
    <label for="required_later"></label>
        <input type="text" name="text_input_field"  id="required_later" disabled><br>

        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $("#ip").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
              $( "#required_later" ).attr("pattern",  "((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" );       


        });
        $("#domain").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
            $( "#required_later" ).attr("pattern",'/^(http(s)?\/\/:)?(www\.)?[a-zA-Z\-]{3,}(\.(com|net|org))?$/');

        });



    </script>


</body>

<body>
    <form action="" method="post">


        <input type="radio" id="ip" name="radio_options" value="option1">
        <label for="option1">IP</label><br>

        <input type="radio" id="domain" name="radio_options" value="option2">
        <label for="option2">Domain</label><br>
    <label for="required_later"></label>
        <input type="text" name="text_input_field"  id="required_later" disabled><br>

        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $("#ip").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
              $( "#required_later" ).attr("pattern",  "((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" );       


        });
        $("#domain").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
            $( "#required_later" ).attr("pattern",'/^(http(s)?\/\/:)?(www\.)?[a-zA-Z\-]{3,}(\.(com|net|org))?$/');

        });



    </script>


</body>

I want to validate text box according to radio buttons, suppose I have selected the ip address text box should validate taken input according to pattern of ip address.

Answer 1

You can get the value of the selected radio button like this in jquery :

$("input[name=radio_options]:checked").val()

So you can do something like this :

 $("#ip").click(function() { $("#required_later").prop("required", true); $("#required_later").prop("disabled", false); }); $("#domain").click(function() { $("#required_later").prop("required", true); $("#required_later").prop("disabled", false); }); $("#sampleButton").click(function() { if($("input[name=radio_options]:checked").val() == "option1"){ const reg = /((^|\\.)((25[0-5])|(2[0-4]\\d)|(1\\d\\d)|([1-9]?\\d))){4}$/ if((reg.test($("#required_later").val())) == false){ alert("Your Ip should contain ... ") } }else{ const reg = /^(http(s)?\\/\\/:)?(www\\.)?[a-zA-Z\\-]{3,}(\\.(com|net|org))?$/ if((reg.test($("#required_later").val())) == false){ alert("Your Domain should contain ... ") } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" id="ip" name="radio_options" value="option1"> <label for="option1" id="option1">IP</label><br> <input type="radio" id="domain" name="radio_options" value="option2"> <label for="option2" id="option2">Domain</label><br> <label for="required_later"></label> <input type="text" name="text_input_field" id="required_later" disabled><br> <input id="sampleButton" type="submit" name="submit" value="Submit">

In the sampleButton.click you check if option1 or 2 is selected and validate the input accordingly

Validation of text box according to selected radio button

Question

1 answers

solution1
0 ACCPTED 2019-05-22 19:34:55

Validation of text box according to selected radio button

Question

1 answers

solution1 0 ACCPTED 2019-05-22 19:34:55

solution1
0 ACCPTED 2019-05-22 19:34:55