OnSubmit data validation w/ invalid fields and correct data return-CodePudding

I am having trouble with a lab of mine and just need some guidance or tips on where to go. I need a function that alerts the user when any field is invalid and red outline any section that is invalid and if no sections are valid then to instead just display the users input such as name, gender state, fav movie type and so on.

I am stumped because I have created a test function which does not even work correctly when the user selects submit. when the name field is left empty it does not even alert the user that left the field blank.

<html>
<head>
<title>Form Practice</title>

</head>


<body>
<script>


function ValidationEvent(){
var fname=document.myForm.firstName;
var lname=document.myForm.lastName;

if (fname == "" && lname == ""){

alert("fill out please.");
return false;

}
else{
alert("thank you");

}
return true;
}
</script>
<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" method="post" action="mailto:[email protected]" onsubmit="return ValidationEvent()">
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male 
<input type="radio" name="gender" value="F">Female <br>


Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>


Please select your state: 
<select name="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
</select>   <br>        
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>

CodePudding user response：

What you are struggling with is that you are using the htmlinput whole dom element instead of the value of it, when in doubt always print the value and check what it actually contains console.log(fname);. So in your case you need to access the value of it, which you can get from the console.log actually. document.myForm.firstName.value

I added a small beginning for the red thingy you asked on the input but left the rest to you so i dont spoil the fun of it.

Here is a working jsfiddle: https://jsfiddle.net/odsvpwf0/

CodePudding user response：

use or operator to check if first or last name is empty, also you need event.preventDefault() to cancel default action

function ValidationEvent(e) {
    var fname = document.myForm.firstName;
    var lname = document.myForm.lastName;
    if (!fname.value || !lname.value) { // use 'or' operator here 
        fname.classList.add('red-border');
        lname.classList.add('red-border');
        e.preventDefault(); // Cancel action
        alert("fill out please.");
    }
    else {
        alert("thank you");
    }
}

<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" method="post" action="mailto:[email protected]" 

onsubmit="ValidationEvent(event)"> <!-- ValidationEvent(event) is required -->

  First Name*: <input type="text" name="firstName"><br>
  Last Name*: <input type="text" name="lastName"><br>
  Gender*: <input type="radio" name="gender" value="M">Male
  <input type="radio" name="gender" value="F">Female <br>

  Choose Your Favorite Types of Movies (check all that applies):
  <input type="checkbox" name="movies" value="comedy"> Comedy
  <input type="checkbox" name="movies" value="drama"> Drama
  <input type="checkbox" name="movies" value="action"> Action
  <input type="checkbox" name="movies" value="horror"> Horror<br>

  Please select your state:
  <select name="state">
    <option value="AL">Alabama</option>

  </select> <br>
  Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
  <input type="submit">
  <input type="reset">
</form>