validate html form using java script

Question

I am new to js [ Client side scripting ]

I worked on php earlier Now I think i need to use js for my application, here is a tiny code for that .

<form name = "Purchase" action = "purchase.php" method = "POST">
<select name = "pname">
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
<input type = "number" name = "price" required></input>
<input type = "number" name = "Total" required></input>
<input type = "submit" name = "NewPurchase" Value = "Add">
</form>

I would like to validate that all the values are set or not mainly drop down in the form if it is not selected then alert message should display saying that value is not selected I have modified the same file as show below but is not working.

<SCRIPT LANGUAGE="JavaScript">
function validateForm(objForm)
{
    var returnStatus = 1;
    if (objForm.Make.selectedIndex == 0) 
    {
        alert("Please select a all select options");
        returnStatus = 0;
    };
    if (returnStatus) 
    {
        objForm.submit();
    }
}
</script>

modified input submit tag too as

<input type = "submit" name = "NewPurchase" Value = "Add" onClick="validateForm(document.testform)">

Presently I am validating all the values using php in the next page ["purchase.php"] using isset()

Please let me know how to use the same in js .

Have a look into this also, JQuery Validate Plugin jqueryvalidation.org/files/demo — Siva.G ツ
– Siva.G ツ, Commented Jun 2, 2015 at 9:11
@EJTH : Yeah we can do that but we may not sure which version client may use , if it is HTML4 means it would be prob. — prabhu
– prabhu, Commented Jun 2, 2015 at 10:17

Lain · Accepted Answer · 2015-06-02 10:00:55Z

Basically I would not recommend alerts(). Sure they are nice and fullfill their duty, yet they also block the rest of the browser pretty much.

<html>
    <head>
        <Script>
            function validateForm(e){
                var tStatus = 1;

                if (e){
                    var tE = e.parentNode; //Getting the form container.
                    var tL = document.querySelectorAll('[required]'); //Get required elements;

                    for(var i=0, j=tL.length;i<j;i++){
                        tL[i].style.backgroundColor = '#ffffff'; //Reseting our error marks.

                        if (tL[i].tagName === 'SELECT' && tL[i].selectedIndex === 0){
                            //For dropdowns, we check if not the first option is selected
                            var tStatus = 0;
                            tL[i].style.backgroundColor = 'crimson';
                            //alert('..') //Can put alerts instead, but alerts are rarely a good option
                        }
                        else if (tL[i].tagName === 'INPUT' && tL[i].type == 'number' && (tL[i].value.trim() === '' || isNaN(tL[i].value))){
                            //For number input, we check if a value is entered which is a number.
                            var tStatus = 0;
                            tL[i].style.backgroundColor = 'crimson';
                            //alert('..') //Can put alerts instead, but alerts are rarely a good option
                        }
                        else if (tL[i].tagName === 'INPUT' && tL[i].type == 'text' && tL[i].value.trim() === ''){
                            //For input, we check if any text is entered which is not only whitespaces.
                            var tStatus = 0;
                            tL[i].style.backgroundColor = 'crimson';
                            //alert('..') //Can put alerts instead, but alerts are rarely a good option
                        };
                    };
                };

                //Proceed how ever you want with your status [0|1]
                return (tStatus === 1);
            };
        </Script>
    </head>

    <body>
        <form name = "Purchase" action = "purchase.php" method = "POST">
            <select name = "pname" required>
                <option value = "p1"> p1 </option>
                <option value = "p2"> p2 </option>
            </select> <!-- Close the select? -->

            <input type = "text" name = "text" required></input>
            <input type = "number" name = "Total" required></input>
            <input type = "number" name = "Total" required></input>
            <input type = "submit" name = "NewPurchase" Value = "Add" onsubmit="return validateForm(this)">
        </form>
    </body>
</html>

Thanks for that , In validateform function, can we make SELECT tag condition using value insted of "first option is selected" ?
Sure, this is how you get the value: tL[i].options[tL[i].selectedIndex].value

Danyal Sandeelo · Accepted Answer · 2015-06-02 09:52:52Z

0

You have missed to close select so your select would be like:

<select name = "pname" id="pname">
 <option value = "p1"> p1 </option>
 <option value = "p2"> p2 </option>
</select>

assign id to each of your input field;

remove ; in your js code

if check it in your js function use, document.getElementById("id_of_input");

if (value==""){
       alert("fill abc field"); 
       return false;
  }

similarly, check all of them

instead of onclick Event add an event to the form

 onsubmit="return  validateForm();"

return true in your js function at the end, if any of the input gets failed, it will return false so the form won't be submitted.

You can use isset() function but that is pointless here since you are doing client side validation..

you can user required="required" , that is in html5 and won't let user to submit the form without add some value in the field.

edited Jun 2, 2015 at 9:52

answered Jun 2, 2015 at 9:02

Danyal Sandeelo

12.4k10 gold badges57 silver badges90 bronze badges

2 Comments

Random Over a year ago

OP is also asking about a isset() in PHP, can you extend ?

Danyal Sandeelo Over a year ago

@Random changed my answer

Collectives™ on Stack Overflow

validate html form using java script

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related