Validation of text box according to selected radio button

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.

Solution

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