CODEWITHSUNDEEP
javascriptformshtml
Raviteja Reddy
Raviteja Reddy

Reputation: 171

Html Form Unable to Validate Inputs using JavaScript

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.

Upvotes: 1

Views: 96

Answers (4)

Just_Do_It
Just_Do_It

Reputation: 821

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>

Upvotes: 1

Michele Dibenedetto
Michele Dibenedetto

Reputation: 575

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>

Upvotes: 0

slevy1
slevy1

Reputation: 3820

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.

Upvotes: 1

Uday
Uday

Reputation: 365

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.

Upvotes: 1

Related Questions