Проверка текстового поля в соответствии с выбранным переключателем - PullRequest
Новая
       23

Проверка текстового поля в соответствии с выбранным переключателем

0 голосов
/ 22 мая 2019

У меня есть одно текстовое поле и две радиокнопки, такие как Ip и домен, я хочу проверить текстовое поле в соответствии с выбранной радиокнопкой: 

<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>

Я хочу проверить текстовое поле в соответствии с переключателями, предположим, что я выбрал текстовое поле IP-адрес должно проверять введенные данные в соответствии с шаблоном IP-адреса.

1 Ответ

0 голосов
/ 22 мая 2019

Вы можете получить значение выбранного переключателя, как это в jquery:

$. ( "Вход [имя = radio_options]: проверено") Вал ()

Так что вы можете сделать что-то вроде этого: 

$("#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">

В файле sampleButton.click вы проверяете, выбран ли параметр 1 или 2, и проверьте правильность ввода

...