CODEWITHSUNDEEP
javascriptjquery
ZSmef
ZSmef

Reputation: 21

Radio button validation and Selector list validation in jQuery

$(document).ready(function ()   {

  $("#mysubmit").click(function (){
    $("#first_name").text("");
    $("#last_name").text("");
    $("#message").text("");

    var myFirst = $("#first_name").val();
    var fName = "";
    var myLast = $("#last_name").val();
    var lName = "";
    var radioVal = $("input[name='gender']:checked").val();
    var myGender = "";
    var years = $("#years option:selected").val();
    var myYears = "";


    if (myFirst == "")
    {
      $("#first_error").text("You must Enter a First Name");
      $("#first_name").focus();
    }
    else {
       fName += "Employment Stats for " + $("#first_name").val() + " ";
    }

    if (myFirst !== "" && myLast == "")
    {
      $("#first_error").text("");
      $("#last_error").text("You must Enter a Last Name");
      $("#last_name").focus();
    }
    else {
       lName += $("#last_name").val();
    }

    if (myLast !== "" & radioVal == "")
    {
      $("#gender_error").text("You must choose a Gender");
      return false;
    }

    else {
        console.log(radioVal)
        myGender += "You are a: " + radioVal;
    }

      if (radioVal !== "" && years == "-")
     {
        $("#years_error").text("You Must enter amount of Years");
      }
      else {
        myYears += $("#years").text("You have: " + years + " years experience");
        console.log(years)
      }
    //yellow textbox for end message after submit
    if (myFirst !== "" && myLast !== "" && myGender !== "" && years !== "-")
    {
      $("#message").css("backgroundColor", "yellow");
      $("#message").text(fName + lName + myGender + myYears);
    }

  })

  })
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}

* {
    margin: 10;
    padding: 10;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 650px;
    background-color: silver;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
}

p {
    padding-bottom: .25em;
    padding-left: 25px;
}

.error {
    color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Assignment 6</title>
    <link rel="stylesheet" href="Assignment_6.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="Assignment_6.js"></script>
</head>

<body>
    <div id="top">
    <h1>Assignment 6</h1>
    <h3>Enter Employment Statistics</h3>
    <form>
        <br>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
        <br>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
        <br>
        Male <input type="radio" name="gender" value="M">
        Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
        <br>
        Years Experience:
        <select id="years" size="1">
            <option value="-">-</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>

        <span class="error" id="years_error"></span>

        <br><br>
        <input type="button" id="mysubmit" value="Submit Form">
        <br>
    </form>
    </div>

    <div id="message">
    </div>
</body>
</html>

I'm having trouble figuring out form validation using jQuery. I'm supposed to have an error message pop up one by one in the fields if something is not filled out.

For example, if the first name is not filled out, on submit it shows the error message for first name and so forth for the rest.

I'm having issues getting the radio button and the selector list to show an error message and to retrieve the value to then place into my end message. Would anyone be able to assist me with this?

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Assignment 6</title>
    <link rel="stylesheet" href="Assignment_6.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="Assignment_6.js"></script>
</head>

<body>
    <div id="top">
    <h1>Assignment 6</h1>
    <h3>Enter Employment Statistics</h3>
    <form>
        <br>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
        <br>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
        <br>
        Male <input type="radio" name="gender" value="M">
        Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
        <br>
        Years Experience:
        <select id="years" size="1">
            <option value="-">-</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>

        <span class="error" id="years_error"></span>

        <br><br>
        <input type="button" id="mysubmit" value="Submit Form">
        <br>
    </form>
    </div>

    <div id="message">
    </div>
</body>
</html>

js:

$(document).ready(function ()   {

  $("#mysubmit").click(function (){
    $("#first_name").text("");
    $("#last_name").text("");
    $("#message").text("");

    var myFirst = $("#first_name").val();
    var fName = "";
    var myLast = $("#last_name").val();
    var lName = "";
    var radioVal = $("input[name='gender']:checked").val();
    var myGender = "";
    var years = $("#years option:selected").val();
    var myYears = "";


    if (myFirst == "")
    {
      $("#first_error").text("You must Enter a First Name");
      $("#first_name").focus();
    }
    else {
       fName += "Employment Stats for " + $("#first_name").val() + " ";
    }

    if (myFirst !== "" && myLast == "")
    {
      $("#first_error").text("");
      $("#last_error").text("You must Enter a Last Name");
      $("#last_name").focus();
    }
    else {
       lName += $("#last_name").val();
    }

    if (myLast !== "" & radioVal == "")
    {
      $("#gender_error").text("You must choose a Gender");
      return false;
    }

    else {
        console.log(radioVal)
        myGender += "You are a: " + radioVal;
    }

      if (radioVal !== "" && years == "-")
     {
        $("#years_error").text("You Must enter amount of Years");
      }
      else {
        myYears += $("#years").text("You have: " + years + " years experience");
        console.log(years)
      }
    //yellow textbox for end message after submit
    if (myFirst !== "" && myLast !== "" && myGender !== "" && years !== "-")
    {
      $("#message").css("backgroundColor", "yellow");
      $("#message").text(fName + lName + myGender + myYears);
    }

  })

  })

css:

/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}

* {
    margin: 10;
    padding: 10;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 650px;
    background-color: silver;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
}

p {
    padding-bottom: .25em;
    padding-left: 25px;
}

.error {
    color: red;
}

Upvotes: 0

Views: 135

Answers (1)

Kinglish
Kinglish

Reputation: 23664

The issue is you're testing for a blank value, when what is actually getting returned is undefined. That is because you're asking for the value of something that doesn't yet exist - in this case, a selected radio button.

When no radio button is selected, there is no value for var radioVal = $("input[name='gender']:checked").val(); and so it's undefined.

I see you have a variable ready, but it's testing the wrong thing, here is my suggested change:

var radioVal = $("input[name='gender']:checked"); 
// this creates an array of elements 
var genderIsSelected = radioVal.length > 0; 
// if that array has something in it, the gender was selected
var myGender = genderIsSelected ? radioVal[0].val() : '';
// populate myGender with the actual value, or blank

The same error is happening for your select menu validation.

Upvotes: 1

Related Questions