Having trouble accessing JavaScript Form Elements through Form Variable

Question

Having trouble accessing JavaScript Form Elements through Form Variable

For username validation in a form using JavaScript, I'm attempting to access the Label tag within the Form tag. If the Regex matches, then display an error in the Label; otherwise, hide it. However, when I try to modify the text in the text field, I encounter the following error:

Uncaught TypeError: can't access property "style", document.forms.form1.uNameError is undefined

Example code snippet:


        <body>
        <form name="form1">

            // few code here

            <div class="main">
                <input type="text" id="uname" name="username" onchange="checkUsername()">
                <label id="uNameError" style="color: red;">Incorrect name</label> 

            //few code here

            </div>
        </form>

        <script>
             var form=document.forms['form1'];

            function checkUsername() {
                
                let username=form["uname"].value.trim();
                let validate= /[^a-zA-Z\s]/ig.test(username);
                
                if(validate===true){
                    form["uNameError"].style.display="inline";
                    
                }else {
                    form["uNameError"].style.display="none";
                }

            }
        </script>

        </body>

Is there a way to effectively reuse the form variable in this scenario?

javascript html css forms

Answer 1

Answer №1

Here is a detailed explanation:

<form name="form1">
  <input type="text" id="uname" name="username">
  <label id="uNameError" style="color: red;">Incorrect name</label>
</form>
<script>
  var form = document.forms['form1']
  console.log(form.elements.length)
</script>

Upon running the code above, it's observed that the document.forms.elements only has a length of 1 despite having both label and input elements. This discrepancy occurs because:

Only certain tags can be accessed using document.forms:

<button>
<fieldset>
<input> (excluding "image" type inputs for historical reasons)
<object>
<output>
<select>
<textarea>

The absence of label in this list explains why it doesn't register. For further insights, refer to this link.

Possible Solutions:

Replace label with output for the current code to function properly.

<form name="form1">
            <input type="text" id="uname" name="username" onchange="checkUsername()">
            <output id="uNameError" name='uNameError' style="color: red;">Incorrect name</output> 
</form>

<script>
        var form=document.forms['form1']

        function checkUsername() {
            
            let username=form["uname"].value.trim();
            let validate= /[^a-zA-Z\s]/ig.test(username);
            
            if(validate===true){
                form["uNameError"].style.display="inline";
                
            }else {
                form["uNameError"].style.display="none";
            }

        }
    </script>

Access the label by referencing its id.

<form name="form1">
  <input type="text" id="uname" name="username" onchange="checkUsername()">
  <label id="uNameError" style="color: red;">Incorrect name</label>

</form>

<script>
  var form = document.forms['form1'];

  function checkUsername() {

    let username = form["uname"].value.trim();
    let validate = /[^a-zA-Z\s]/ig.test(username);
    let uNameError = document.getElementById('uNameError')
    if (validate === true) {
      uNameError.style.display = "inline";

    } else {
      uNameError.style.display = "none";
    }

  }

</script>

Answer 2

Here is a detailed explanation:

<form name="form1">
  <input type="text" id="uname" name="username">
  <label id="uNameError" style="color: red;">Incorrect name</label>
</form>
<script>
  var form = document.forms['form1']
  console.log(form.elements.length)
</script>

Upon running the code above, it's observed that the document.forms.elements only has a length of 1 despite having both label and input elements. This discrepancy occurs because:

Only certain tags can be accessed using document.forms:

<button>
<fieldset>
<input> (excluding "image" type inputs for historical reasons)
<object>
<output>
<select>
<textarea>

The absence of label in this list explains why it doesn't register. For further insights, refer to this link.

Possible Solutions:

Replace label with output for the current code to function properly.

<form name="form1">
            <input type="text" id="uname" name="username" onchange="checkUsername()">
            <output id="uNameError" name='uNameError' style="color: red;">Incorrect name</output> 
</form>

<script>
        var form=document.forms['form1']

        function checkUsername() {
            
            let username=form["uname"].value.trim();
            let validate= /[^a-zA-Z\s]/ig.test(username);
            
            if(validate===true){
                form["uNameError"].style.display="inline";
                
            }else {
                form["uNameError"].style.display="none";
            }

        }
    </script>

Access the label by referencing its id.

<form name="form1">
  <input type="text" id="uname" name="username" onchange="checkUsername()">
  <label id="uNameError" style="color: red;">Incorrect name</label>

</form>

<script>
  var form = document.forms['form1'];

  function checkUsername() {

    let username = form["uname"].value.trim();
    let validate = /[^a-zA-Z\s]/ig.test(username);
    let uNameError = document.getElementById('uNameError')
    if (validate === true) {
      uNameError.style.display = "inline";

    } else {
      uNameError.style.display = "none";
    }

  }

</script>

Answer 3

Answer №2

When working with document.forms, it's important to note that it only supports form elements such as input and button. Check out this link for more information.

If you want to access the label element directly...

1 ) ... You can use document.forms in the following way:

form["uname"].labels[0] 
// Note!! 
// Make sure to establish a connection between label and input by adding a for attribute for="uname" inside the label element. 'uname' is the id of the input element. This will allow you to get the label using .label[0].

or

2 ) ... Select it using the previously declared form:

form.querySelector('#uNameError');

or

3 ) ... Access it using nextElementSibling:

form["uname"].nextElementSibling

This will provide you with the necessary access to the label.

Therefore:

<body>
    <form name="form1">
            <div class="main">
                    <input type="text" id="uname" name="username" onchange="checkUsername()">
                    <label id="uNameError" for="uname" style="color: red;">Incorrect name</label>
            </div>
    </form>
    
    <script>
            var form=document.forms['form1'];
    
            function checkUsername() {

                let username=form["uname"].value.trim();
                let validate= /[^a-zA-Z\s]/ig.test(username);
                if(validate===true){
                    form["uname"].labels[0].style.display="inline";
                    // or
                    // form.querySelector('#uNameError').style.display="inline";
                    // or
                    // form["uname"].nextElementSibling.style.display="inline";
                }else {
                    form["uname"].labels[0].style.display="none";
                    // or
                    // form.querySelector('#uNameError').style.display="none";
                    // or
                    // form["uname"].nextElementSibling.style.display="none";
                }
            }
        </script>
    
    </body>

Off topic suggestion: Consider using onkeyup instead of onchange and enhancing your regex structure.

Answer 4

When working with document.forms, it's important to note that it only supports form elements such as input and button. Check out this link for more information.

If you want to access the label element directly...

1 ) ... You can use document.forms in the following way:

form["uname"].labels[0] 
// Note!! 
// Make sure to establish a connection between label and input by adding a for attribute for="uname" inside the label element. 'uname' is the id of the input element. This will allow you to get the label using .label[0].

or

2 ) ... Select it using the previously declared form:

form.querySelector('#uNameError');

or

3 ) ... Access it using nextElementSibling:

form["uname"].nextElementSibling

This will provide you with the necessary access to the label.

Therefore:

<body>
    <form name="form1">
            <div class="main">
                    <input type="text" id="uname" name="username" onchange="checkUsername()">
                    <label id="uNameError" for="uname" style="color: red;">Incorrect name</label>
            </div>
    </form>
    
    <script>
            var form=document.forms['form1'];
    
            function checkUsername() {

                let username=form["uname"].value.trim();
                let validate= /[^a-zA-Z\s]/ig.test(username);
                if(validate===true){
                    form["uname"].labels[0].style.display="inline";
                    // or
                    // form.querySelector('#uNameError').style.display="inline";
                    // or
                    // form["uname"].nextElementSibling.style.display="inline";
                }else {
                    form["uname"].labels[0].style.display="none";
                    // or
                    // form.querySelector('#uNameError').style.display="none";
                    // or
                    // form["uname"].nextElementSibling.style.display="none";
                }
            }
        </script>
    
    </body>

Off topic suggestion: Consider using onkeyup instead of onchange and enhancing your regex structure.

Having trouble accessing JavaScript Form Elements through Form Variable

Answer №1

Answer №2

Similar questions

Does modifying data from an AngularJS service update the original data within the service?

Trouble accessing files in the assets folder of Angular 2

Having trouble getting getStaticProps to display JSX in Next.JS

Utilizing multiple materials with a single mesh in three.js: A comprehensive guide

Dealing with Unreliable Data in Scatter Plots using React and HighCharts

Is it possible to adjust the center of rotation in THREE.js TrackballControls so that it is not located at the center of the canvas

Can directive scopes (such as obj.prop) be linked together in a chain?

Ways to display varied JSON information on a component in Angular 4

Performing a callback function in node environment

Utilizing WebView for Initiating AJAX Calls

Monitoring page reload with JavaScript

Displaying Local Storage Data in Primeng Dropdown

Using Material UI with Reactjs for Background Image Mapping

unable to clear form fields after ajax submission issue persisting

What is the method for rendering an ejs template from express using fetch without the need to submit a form?

Error: The array provided to THREE.BufferAttribute must be a Typed ArraydataType

The AngularJS ng-view was commented out and no errors were triggered

Merge the xAxis functionality with Highcharts

Why is it that GetElements does not provide immediate results upon execution?

Append a constant string to the conclusion of the route parameter