How to change TextArea validation based on dropdown

0
votes

I need to perform validation on TextArea based on below scenario:

  1. If Mobile is selected in the dropdown, only number should allow to enter in the TextArea.
  2. If Email is selected in the dropdown, we can enter any character in the TextArea.

image snippet here

Below is my code to achieve above scenario. I have performed validation based on class name of Text Area. When I change dropdown value, I am changing the class name of Text Area.

<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">[email protected]</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>

Here is my doubt

I can see through inspect element, when I change dropdown value, the class name of text Area is being changed on run time. But, still validation is being perform based on old class name of text Area.

2
javascripthtmljqueryvalidation

2 Answers

0
votes

The code is messed up with both javascript and jQuery. I'm providing javascript only solution. And classes are also mismatching (mobileValidation and numberValidation).

Here is the running code. You can run code snippet and check.

<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)">[email protected]</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>
0
votes

There are some issue with your <script>, you are trying to use pure javascript in jquery. Once try this script and check

$(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;
            }
        });
    });