How to change TextArea validation based on dropdown
Question
I need to perform validation on TextArea based on below scenario:
- If Mobile is selected in the dropdown, only number should allow to enter in the TextArea.
- If Email is selected in the dropdown, we can enter any character in the TextArea.
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">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>
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 answers
solution1
0 2020-08-29 08:10:06
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)">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>
solution2
0 ACCPTED 2020-08-29 08:11:50
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;
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.