Make buttons required

ivan rosa
ivan rosa used Ask the Experts™
on
Hi Folks,

I had created this simple form below, my question is how can i make it required to be filled if not input.
And for the select value how can i make it that IF, -select- is still not selected, make it also required?

Thanks for looking


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function submitButton(frm){
            var form = document.forms.cvapplication;
			var output = '<p>Your submission has been accepted</p>';
            output += '<p>interests: ' + form.interests.value + '</p>';
            output += '<p>state: ' + form.country.value + '</p>';
            form.innerHTML = output;
            }
    </script>

</head>
<body>
        <form name="cvapplication" id="cvapplication">
            <p>Input Your Interests</p>
            <input type="text" name="interests" id="interests" size="40" style="font-style: oblique" required>

            <p>Input Your state</p>
            <select size="1" name="country" id="country" style="font-style: italic">
                    <option value="">- Select -</option>
                    <option value="US">United States</option>
                    <option value="CA">Canada</option>
            </select>

            <input type="button" onclick="submitButton(this.form)" value="Submit" >
        </form>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Systems Analyst
Commented:
You can add a validateForm() funtion, for example:

function validateForm() {
            var x = document.forms["cvapplication"]["interests"].value;
            var y = document.forms["cvapplication"]["country"].value;
            if (x == "" || y == "") {
                alert("All items in the form must be filled out.");
                return false;
            }
            else {
                submitButton(this.form);
            }
        }

Open in new window


On your button you change to:

<input type="button" onclick="validateForm()" value="Submit" >

You can also separate the if statement to give specific messages for each item in order for the message to be more specific to what is missing.

Author

Commented:
Dani, you nailed it first try.

I had thought about a creating a Object array to consolidate all statements,But then again wasn't really sure bout the function.., but they way you did it I have never seen it before, and I can see why you did it too, so the statements are a lot shorter...
I see what you did there my friend, very clever

By the way is it just me or it seems connecting XAML to C# or PowerShell is much easier as opposed creating JS..., I guess I'm making a big deal... hey on my defense this is my 3rd day where i'm connecting the 3 JS,CSS,and HTML... :)

Thanks so much!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial