Validating text area in Java Script freezes all text areas

Question

I have a Html page which uses Java Script and I am opening that page in WebView

My problem is when I enabled max length validation on text area, then after validating text area all the text areas in page are freezed and I am not able to edit or delete from any text area.

Please help me how to resolve this issue that after validating text areas no text area is freezed.

My HTML Page is as

    <table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
        cellspacing="2">

        <tr>
            <td colspan=2>
                <center>
                    <font size=4><b>Student Registration Form</b></font>
                </center>
            </td>
        </tr>

        <tr>
            <td>Name</td>
            <td><input type=text name=textnames id="textname" size="30"></td>
        </tr>

        <tr>
            <td>Father Name</td>
            <td><input type="text" name="fathername" id="fathername"
                size="30"></td>
        </tr>
        <tr>
            <td>Postal Address</td>
            <td><input type="text" name="paddress" id="paddress" size="30"></td>
        </tr>

        <tr>
            <td>Personal Address</td>
            <td><input type="text" name="personaladdress"
                id="personaladdress" size="30"></td>
        </tr>

        <tr>
            <td>Sex</td>
            <td><input type="radio" name="sex" value="male" size="10">Male
                <input type="radio" name="sex" value="Female" size="10">Female</td>
        </tr>

        <tr>
            <td>City</td>
            <td><select name="City">
                    <option value="-1" selected>select..</option>
                    <option value="New Delhi">NEW DELHI</option>
                    <option value="Mumbai">MUMBAI</option>
                    <option value="Goa">GOA</option>
                    <option value="Patna">PATNA</option>
            </select></td>
        </tr>

        <tr>
            <td>Course</td>
            <td><select name="Course">
                    <option value="-1" selected>select..</option>
                    <option value="B.Tech">B.TECH</option>
                    <option value="MCA">MCA</option>
                    <option value="MBA">MBA</option>
                    <option value="BCA">BCA</option>
            </select></td>
        </tr>

        <tr>
            <td>District</td>
            <td><select name="District">
                    <option value="-1" selected>select..</option>
                    <option value="Nalanda">NALANDA</option>
                    <option value="UP">UP</option>
                    <option value="Goa">GOA</option>
                    <option value="Patna">PATNA</option>
            </select></td>

        </tr>

        <tr>
            <td>State</td>
            <td><select Name="State">
                    <option value="-1" selected>select..</option>
                    <option value="New Delhi">NEW DELHI</option>
                    <option value="Mumbai">MUMBAI</option>
                    <option value="Goa">GOA</option>
                    <option value="Bihar">BIHAR</option>
            </select></td>
        </tr>
        <tr>
            <td>PinCode</td>
            <td><input type="number" maxlength='6' name="pincode"
                id="pincode" size="30"></td>

        </tr>
        <tr>
            <td>EmailId</td>
            <td><input type="text" name="emailid" id="emailid" size="30"></td>
        </tr>

        <tr>
            <td>DOB</td>
            <td><input type="text" name="dob" id="dob" size="30"></td>
        </tr>

        <tr>
            <td>MobileNo</td>
            <td><input type="text" name="mobileno" id="mobileno" size="30"></td>
        </tr>
        <tr>
            <td><input type="reset"></td>
            <td colspan="2"><input type="submit" value="Submit Form" /></td>
        </tr>
    </table>
</form>

I added max length and only number in Pincode textarea. when I entered pin code after that each text area is freezed.

If I did not put these validation in pincode text area then it never freezes.

after you enter some value in pincode and press submit the code freeze ?? — Dileep, Apr 17 '14 at 04:36
@Dileep No as soon as 6 digits are entered in text area, immediately pincode text area and all other text areas are freezed , I am not able to delete or modify any text area.. — Neha Shukla, Apr 17 '14 at 04:39
pincode text field will freeze after you enter 6 digit but the rest of the field will remains active, like address and all..is that what you get..?? — Dileep, Apr 17 '14 at 04:48
No ... after entering 6 digits in pincode all other text areas including pincode are freezed... — Neha Shukla, Apr 17 '14 at 04:49
@Dileep it didnt help me...Infact it is not validating pincode field..I set max="6" still I am able to enter more digits .. — Neha Shukla, Apr 17 '14 at 05:00
@NehaShukla max value is the maximum number allowed it shows an error message as tool tip. You cant block the number of characters that can be entered — Dileep, Apr 17 '14 at 05:18

score 5 · Accepted Answer · answered Apr 21 '14 at 07:14

The issue that you are facing is a bug and has already been reported as issue #35264.

I have created a workaround for it at jsfiddle. For convenience pasted code below.

HTML:

<input type="number" maxlength='6' name="pincode" id="pincode" size="30" max="999999" >

Javascript:

var pincode = document.getElementById('pincode');
var maxLength = pincode.maxLength;
pincode.onkeypress = function(e){
    if( pincode.value.length >= maxLength ){
        return false;
    }
};

The solution is, just ensure the content of input element does not cross the max limit.

On each keypress event, compare the input value length against max length. If it is more return false so that the input will be discarded.
Set max attribute on input element, to prevent user providing input more than max value using up arrow key.

thanks for ur valuable response.. Me n my team will work on solution as u replied then will let u know... — Neha Shukla, Apr 21 '14 at 07:23

Manu Mathew · Answer 2 · 2014-04-17T03:43:58.530

First of all what you said is not text area. It's just a text filed. Text area should be defied as <textarea rows="10" cols="15"></textarea>.

Actually maxlength attribute is used to limit number of characters that user can enter. you gave maxlength='6' here which means maximum values user here can enter is just 6 digits or character.

I hope you were trying to adjust the width of the input filed. For that, give the following attribute and value : style="width:100px;max-width:60%;". ie., <input type="number" maxlength='6' name="pincode" id="pincode" size="30" style="width:100px;max-width:60%;">

Dileep · Answer 3 · 2014-04-17T05:32:48.380

In HTML you can use max attribute to set a maximum length to an input type number.

<input type="number" min="1" max="999999" name="pincode" id="pincode" size="30">

Documentation about maxLength attribute in HTML

maxlength

If the value of the type attribute is text, email, search, password, tel, or url, this >attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.

Thus its designed to be ignored for input type="number"

Look here for complete set of attributes description for < input >

It will only set the maximum allowed number as the max value specified, it won't be blocking any value grater than max Value. Max attribute shows an error popup showing that the limit is exceeded.

If you want to block the text value from not getting any bigger than 6, you can uses JavaScript

SCRIPT

  <script>  function validateLength(obj)
    {
        if(obj.value.length > 6)
            obj.value = obj.value.substr(0, 6);
    }
  </script>

HTML

 <input type="number" min="1" max="999999" name="pincode" id="pincode" onkeyup="validateLength(this)">

score 0 · Answer 4 · edited May 23 '17 at 12:06

I think that the only way to accomplish what you want is with JavaScript. I would use a method similar to Dileep's with a few differences:

Instead of just splicing the first six characters from the current value, I would save the last entered valid value and revert to that. A similar functionality, but more stable as far as I can tell.
Instead of using an inline HTML event callback, I would recommend assigning it directly via the DOM in the JavaScript. For a discussion of the differences between these methods, see this SO.
I also think that having the input box briefly flash a different color, at least for debugging purposes, would help to see when and how the code was executing if anything doesn't work.
Finally, I would use an <input type="tel"/> rather than an <input type="number"/>. The tel will still bring up a number-pad on mobile devices, but, unlike number, won't have an empty value when non-numeric data is entered. (See this SO.)

I've put all of this into a brief JSFiddle for you to see. Feel free to reuse it if it helps: http://jsfiddle.net/VPL5e/1/

Does this solve your problem? If you need anything else, please ask!

score 0 · Answer 5 · answered Apr 23 '14 at 11:17

There is nothing wrong in your html code may be the issue is in "form validation". anyway i am providing you that full html and form validation code.

HTML

    <html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>

<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>

<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>

<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>

<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>

<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>

</tr>

<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>

<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>

Form Validation

function validate()
{ 
   if( document.StudentRegistration.textnames.value == "" )
   {
     alert( "Please provide your Name!" );
     document.StudentRegistration.textnames.focus() ;
     return false;
   }
   if( document.StudentRegistration.fathername.value == "" )
   {
     alert( "Please provide your Father Name!" );
     document.StudentRegistration.fathername.focus() ;
     return false;
   }

   if( document.StudentRegistration.paddress.value == "" )
   {
     alert( "Please provide your Postal Address!" );
     document.StudentRegistration.paddress.focus() ;
     return false;
   }
   if( document.StudentRegistration.personaladdress.value == "" )
   {
     alert( "Please provide your Personal Address!" );
     document.StudentRegistration.personaladdress.focus() ;
     return false;
   }
   if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )
   {
   alert ( "Please choose your Gender: Male or Female" );
   return false;
   }   
   if( document.StudentRegistration.City.value == "-1" )
   {
     alert( "Please provide your City!" );
     document.StudentRegistration.City.focus() ;
     return false;
   }   
   if( document.StudentRegistration.Course.value == "-1" )
   {
     alert( "Please provide your Course!" );

     return false;
   }   
   if( document.StudentRegistration.District.value == "-1" )
   {
     alert( "Please provide your Select District!" );

     return false;
   }   
   if( document.StudentRegistration.State.value == "-1" )
   {
     alert( "Please provide your Select State!" );

     return false;
   }
   if( document.StudentRegistration.pincode.value == "" ||
           isNaN( document.StudentRegistration.pincode.value) ||
           document.StudentRegistration.pincode.value.length != 6 )
   {
     alert( "Please provide a pincode in the format ######." );
     document.StudentRegistration.pincode.focus() ;
     return false;
   }
 var email = document.StudentRegistration.emailid.value;
  atpos = email.indexOf("@");
  dotpos = email.lastIndexOf(".");
 if (email == "" || atpos < 1 || ( dotpos - atpos < 2 )) 
 {
     alert("Please enter correct email ID")
     document.StudentRegistration.emailid.focus() ;
     return false;
 }
  if( document.StudentRegistration.dob.value == "" )
   {
     alert( "Please provide your DOB!" );
     document.StudentRegistration.dob.focus() ;
     return false;
   }
  if( document.StudentRegistration.mobileno.value == "" ||
           isNaN( document.StudentRegistration.mobileno.value) ||
           document.StudentRegistration.mobileno.value.length != 10 )
   {
     alert( "Please provide a Mobile No in the format 123." );
     document.StudentRegistration.mobileno.focus() ;
     return false;
   }
   return( true );
}

let me know if it worked or any other issue you faced in this.

Validating text area in Java Script freezes all text areas

5 Answers5