Html Form Unable to Validate Inputs using JavaScript

Question

I am creating an application. The HTML file is like the following:

<!DOCTYPE html>
<html>
    <body style="background-color: #ccc">

        <script type="javascript">
            function validateform(){
                alert("Hello");
                var firstnameErr="";
                var valid = true;
                var name = document.myform.fname.value;
                var types = /^[a-zA-Z]+$/;

                if (fname==null || fname=="") {
                    firstnameErr = "required";
                    valid = false;
                } else if (!fname.value.match(types)) {
                    firstnameErr = "format error";
                    valid = false;
                }
                return valid;
            }
        </script>

        <form name="myform" method="post" onsubmit="return  validateform()" action="/Project/ViewList.php">
            Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20"> 
            <span class="error">*
                <script type="javascript"> 
                    document.write(firstnameErr);
                </script>
            </span>
            <input type="submit" name="submit" value="Submit">
        </form>

    </body>
</html>

When I click on the submit button, it straightaway redirects to "ViewList.php" without seeming to run validatefom(). I added the alert() to check whether the function is executing or not. I want my form to submit only when it meets the validation requirements, not when valid is false.

Your method is named validate() but you are calling validateform() in the onsubmit attribute. — Cᴏʀʏ
– Cᴏʀʏ, Commented Jul 11, 2017 at 18:16
I am using validateform() in my original code. This a typo while writing the question — Raviteja Reddy
– Raviteja Reddy, Commented Jul 11, 2017 at 18:19
onsubmit="validateform" should be enough I think - but then again I haven't written inline event handlers in years, and neither should you tbh. — powerbuoy
– powerbuoy, Commented Jul 11, 2017 at 19:16

Uday · Accepted Answer · 2017-07-11 19:11:39Z

1

Besides Typo errors, The main problem that I found is your script is not get executed and your validateform() method is not available. It happened because your script tag type attribute is not correct <script type="javascript">

To make it work you need to change it to this <script type="text/javascript">

And please change your validation method validateform() as it has too may typo.

edited Jul 11, 2017 at 19:11

answered Jul 11, 2017 at 19:06

Uday

3554 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raviteja Reddy Over a year ago

Typos are been corrected and the type is change to text/javascript but still the problem is unsolved, I removed the form tag and validated using jquery and now able to display the error tags but I am unable to use the POST method for sending variables.

Uday Over a year ago

Why have you removed the form tags.

Raviteja Reddy Over a year ago

because post method is refreshing the page, so the errors are not showed once I click on submit button

Uday Over a year ago

But that is not a solution.Can you update the code in your question

slevy1 · Accepted Answer · 2017-07-11 23:51:27Z

What is wrong with the code is that the OP is validating the old-fashioned way with an HTML5 form. Prior to HTML5, you had to use JavaScript for front-end validation; now things are much simpler and easier, too. Of course, the OP would replace the value of the action in the following example with the desired URL.

Note: there were errors in the OP's code, but if you get rid of the JavaScript and code the HTML making sure to add the following to the text input:

required pattern="[a-zA-Z]+"

then the form validates. In other words, you don't have to work so hard when you use HTML5 for form validation :)

<form id="myform" name="myform" method="POST" action="https://www.example.com">
  <label for="fname">Firstname</label>: <input name="fname"  placeholder="First name"  maxlength="20" required pattern="[a-zA-Z]+">
  <input type="submit"  name="submit" value="Submit">
</form>

For those who prefer to do things the old-fashioned way, see this revision of the OP's code. Note: it uses a minimum of variables, employs short-cuts for less verbosity, and is organized with functions. Also, it is kind to the user's hands, too.

Just_Do_It · Accepted Answer · 2017-07-12 15:35:46Z

1

The way you have done you will never be able to use document.write to output anything, use this, working for me:

<!DOCTYPE html>

    <script>
        function validateform(){
            alert("Hello");

            var valid = true;
            var fname = document.myform.fname.value;

            var types = /^[a-zA-Z]+$/;
            if (fname==null || fname=="") {
                firstnameErr = 'required';
                valid = false;
            } else if (!fname.match(types)) {
                firstnameErr = 'format error';
                valid = false;
            }
            document.getElementById('msg').innerHTML = firstnameErr;
            return valid;
        }
    </script>

    <form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
        Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20"> 
        <span class="error">* <label id='msg'></label> </span>
        <input type="submit" name="submit" value="Submit">
    </form>

</body>

edited Jul 12, 2017 at 15:35

answered Jul 11, 2017 at 20:33

Just_Do_It

8217 silver badges22 bronze badges

3 Comments

Raviteja Reddy Over a year ago

I want to display the error message beside the input field and not as an alert.

Just_Do_It Over a year ago

In your case you are defining the var firstnameErr inside the function so how can you use it in document.write???

Just_Do_It Over a year ago

Check the updated code above, works now like the way u want but approach is different.

Michele Dibenedetto · Accepted Answer · 2017-07-12 10:37:16Z

0

It looks you have a series of typo in your code, try this

<!DOCTYPE html>
<html>

<body style="background-color: #ccc">

    <script>
        function validateform() {         
            var firstnameErr = "";
            var valid = true;
            var name = document.myform.fname.value;
            var types = /^[a-zA-Z]+$/;

            if (name == null || name == "") {
                firstnameErr = "required";
                valid = false;
            } else if (!name.match(types)) {
                firstnameErr = "format error";
                valid = false;
            }
            return valid;
        }
    </script>

    <form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
        Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
        <span class="error">*
                <script> 
                    document.write(firstnameErr);
                </script>
            </span>
        <input type="submit" name="submit" value="Submit">
    </form>

</body>

</html>

edited Jul 12, 2017 at 10:37

answered Jul 11, 2017 at 18:30

Michele Dibenedetto

5754 silver badges13 bronze badges

2 Comments

Raviteja Reddy Over a year ago

I corrected the typos and tried to run your function, it is still not validating and is redirecting to next page on clicking Submit button

Michele Dibenedetto Over a year ago

I update my answer, and btw nowadays you can a simple tag <script> omitting the attribute type. check it out

Collectives™ on Stack Overflow

Html Form Unable to Validate Inputs using JavaScript

4 Answers 4

4 Comments

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related