Make buttons required

ivan rosa
ivan rosa used Ask the Experts™
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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        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: ' + + '</p>';
            form.innerHTML = output;

        <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>

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

Open in new window

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Systems Analyst
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 {

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.


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