JavaScript input type validation

Question

I can't seem to figure out the proper JavaScript to validate this form. Please help/provide feedback!

Essentially, my script should validate whether the user has entered data in the input text box, has checked a radio button, has checked at least one checkbox, and has selected an option from the select items.

Also the form uses a submit button to invoke the validation script, so that the form is processed only when the form fields are validated and accepted. If a field is invalid then display a message to the user.

Also need to make sure the form doesn't automatically reset every time the user gets a validation error.

<body>
    <section>
    <h1 style="text-align: center">Vacation Interest Vote Form</h1>           
    <form name="VacayForm" action="mailto:" onsubmit="return Validate1()" method="post">
        <p>Name:<input type="text" name="name" size="25"></p><br>
            <p>Do You Prefer an international destination?</p>
            <p>Domestic<input type="radio" name="domint" value="domestic"></p>
            <p>International<input type="radio" name="domint" value="international"></
            <br>
            <p>Where would you like to go?</p>
                <select type="text" name="continent" value="select" size="1">
                    <option value="domestic">Domestic</option>
                    <option value="europe">Europe</option>
                    <option value="camerica">Central America</option>
                    <option value="asia">Asia</option>
                    <option value="aus">Australia</option>
                </select>
                <br>
            <p>Check the box to act as your digital signature to cast your vote
                <input type="checkbox" value="agree" name="sig">
                <input type="submit" value="Send" name="submit" onclick="if(!this.form.sig.checked){alert('You must agree to cast your vote by checking the box.');
            return false}">
                <input type="reset" value="Reset"name="reset">
        </form>
    </section>
    <script> 
    function Validate1() { 
        var nam = document.forms["VacayForm"]["name"];           
        var dom = document.forms["VacayForm"]["domestic"]; 
        var int = document.forms["VacayForm"]["international"]; 
        var sel = document.forms["VacayForm"]["select"];
        var agree = document.forms["VacayForm"]["agree"];

        //if (name.value == "")                              
        //{ 
        //  window.alert("Please enter your name."); 
        //  name.focus(); 
        //  return false; 
        //} 
        if( document.VacayForm.name.value == "" )
       {
         alert( "Please provide your name!" );
         document.VacayForm.name.focus() ;
         return false;
       }

        if (domestic.value == "")
    else (international.value == "")         
        { 
            window.alert("Please select domestic or international preference to proceed."); 
            domestic.focus();
            international.focus();
            return false; 
        } 

        if (select.selectedIndex < 1)        
        { 
            alert("Please select where you prefer to visit"); 
            select.focus(); 
            return false; 
        } 

        return true; 
        }
    //function Validate2() {
       // var radios = document.getElementsByName("yesno");
      //  var formValid = false;

       // var i = 0;
      //  while (!formValid && i < radios.length) {
       //     if (radios[i].checked) formValid = true;
        //    i++;        
       // }

      //  if (!formValid) alert("Must check an option!");
      //  return formValid;
    //}
    </script>
    </body>
    </html>

Please do not use the jQuery Validate tag when the question has absolutely nothing to do with the jQuery Validate Plugin. Edited. — Sparky
– Sparky, Commented Nov 15, 2019 at 3:37
I can use Jquery validate as well, as long as there is JS. Hence why I used it... i wished you wouldn't have took it upon yourself to edit my post before asking me to do it myself. — seasim
– seasim, Commented Nov 15, 2019 at 19:27
That's not how it works around here. Tags are used to categorize questions based on content and anyone with privileges to edit posts are encouraged to do so as needed. Since the question is not asking about the jQuery Validate plugin nor contains any code related to the jQuery Validate plugin, the "jQuery Validate" tag is definitely not appropriate here. Thanks. — Sparky
– Sparky, Commented Nov 15, 2019 at 20:00

Kwame Opare Asiedu · Accepted Answer · 2019-11-15 02:29:52Z

1

Your validate function could look like this...

function validate() {
    var form = document.forms.VacayForm;

    var name = form.name;           
    var domInt = form.domint; 
    var continent = form.continent;
    var agree = form.agree;

    if (!name.value) {
        alert( "Please provide your name!" );
        name.focus();
        return false;
    }

    if (!domInt.value) {
        alert( "Please select domestic or international preference to proceed" );
        domInt.focus();
        return false;
    }

    if (!continent.value) { 
        alert("Please select where you prefer to visit"); 
        continent.focus();
        return false; 
    }

    if (!agree.checked) { 
        alert("Please check agree to continue"); 
        agree.focus();
        return false; 
    }

    return true;
}

This article from Javascript.info website teaches how to use forms and form elements...

edited Nov 15, 2019 at 2:29

answered Nov 15, 2019 at 2:15

Kwame Opare Asiedu

2,36514 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

seasim Over a year ago

Thanks so much for that article reference. I will read the documentation and try out your validate!!

seasim Over a year ago

unfortunately that validation function doesn't work :(

Collectives™ on Stack Overflow

JavaScript input type validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related