Make buttons required

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

LVL 4
ivan rosaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Danilo AndradeIT Systems AnalystCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ivan rosaAuthor 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!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.