Блог

Главная - Вопросы по программированию - Как изменить проверку текстовой области на основе выпадающего списка

Как изменить проверку текстовой области на основе выпадающего списка

#javascript #html #jquery #validation

#javascript #HTML #jquery #проверка

Вопрос:

Мне нужно выполнить проверку текстовой области на основе приведенного ниже сценария:

  1. Если в выпадающем списке выбран мобильный, в текстовом поле должен быть разрешен ввод только номера.
  2. Если в выпадающем списке выбран адрес электронной почты, мы можем ввести любой символ в текстовом поле.

фрагмент изображения здесь

Ниже приведен мой код для достижения вышеуказанного сценария. Я выполнил проверку на основе имени класса текстовой области. Когда я меняю значение выпадающего списка, я меняю имя класса текстовой области.

 <html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script>
      function changeNotifyTypeValue(textboxControl)
      {
          textboxControl.value="";
          if (textboxControl.className=="mobileValidation")
            textboxControl.className="emailValidation";
          else
           textboxControl.className="mobileValidation";
      }
      
      $(function() {
          $('.numberValidation').keyup(function() {
          this.value = this.value.replace(/[^0-9,][.]?/g, '');
          });
          $('.emailValidation').keyup(function() {
          //email validation
          });
      });
      </script>
   </head>
   <body>
      <table border="1" class="display"
         id="NotificationTable">
         <thead>
            <tr style="background: #0086cd; color: #fff;">
               <th>Update NotifyType</th>
               <th>Update Address</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  <select
                     id="notifyTypeID0"
                     class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)" >
                     <option selected value=EMAIL>EMAIL</option>
                     <option value="mobile">Mobile</option>
                  </select>
               </td>
               <td>
                  <textarea name="address0" id="updateAddress0"
                     class="emailValidation">abc@gmail.com</textarea>
               </td>
            </tr>
            <tr>
               <td>
                  <select id="notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)" >
                     <option value="EMAIL">EMAIL</option>
                     <option selected value="mobile">Mobile</option>
                  </select>
               </td>
               <td> <textarea name="address1" id="updateAddress1" class="numberValidation">9999999999</textarea> </td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Вот мои сомнения

Я могу видеть через элемент проверки, когда я меняю значение выпадающего списка, имя класса текстовой области изменяется во время выполнения. Но, тем не менее, проверка выполняется на основе старого имени класса текстовой области.

Ответ №1:

С вашим <script> есть некоторые проблемы, вы пытаетесь использовать чистый javascript в jquery. Один раз попробуйте этот скрипт и проверьте

 $(document).ready(function(){
        $('textarea').keyup(function(){
            if($(this).hasClass("mobileValidation")){
                var cv = $(this).val();
                $(this).val(cv.replace(/[^0-9,][.]?/g, ''));
            } else if($(this).hasClass("emailValidation")){
                //your email validation code;
            }
        });
    });

Ответ №2:

Код перепутан как с javascript, так и с jQuery. Я предоставляю решение только для JavaScript. И классы также не совпадают (mobileValidation и numberValidation).

Вот работающий код. Вы можете запустить фрагмент кода и проверить.

 <html>

  <head>
    <script>
      function changeNotifyTypeValue(textboxControl) {
        textboxControl.value = '';
        if (textboxControl.className == "mobileValidation")
          textboxControl.className = "emailValidation";
        else
          textboxControl.className = "mobileValidation";
      }

      function validate(textboxControl) {
        console.log(textboxControl.className);
        if (textboxControl.className == "emailValidation") {
          console.log('email');
        } else {
          console.log('number');
          textboxControl.value = textboxControl.value.replace(/[^0-9,][.]?/g, '');
        }
      }
    </script>
  </head>

  <body>
    <table border="1" class="display" id="NotificationTable">
      <thead>
        <tr style="background: #0086cd; color: #fff;">
          <th>Update NotifyType</th>
          <th>Update Address</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <select id="notifyTypeID0" class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)">
              <option selected value=EMAIL>EMAIL</option>
              <option value="mobile">Mobile</option>
            </select>
          </td>
          <td>
            <textarea name="address0" id="updateAddress0" class="emailValidation" onkeyup="validate(updateAddress0)">abc@gmail.com</textarea>
          </td>
        </tr>
        <tr>
          <td>
            <select id=" notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)">
              <option value="EMAIL">EMAIL</option>
              <option selected value="mobile">Mobile</option>
            </select>
          </td>
          <td> <textarea name="address1" id="updateAddress1" class="mobileValidation" onkeyup="validate(updateAddress1)">9999999999</textarea> </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>