Validating using Javascript

1883 views javascript
-1

I am trying to validate this simple quiz using Javascript. The idea is to warn the user when they forget an input when submitting the quiz.

I would like an alert to pop up when the text is mission, when the text entered is more than 3 characters, when the text is not a yes or no, when one of the choices offered has not been marked (for both radio and checkbox input).

I will include both the form and the JavaScript below to go with this, as I find it necessary to understand the issue(s).

    <form name="quiz" onsubmit="return validateForm();" >
                <ul>
                    <li><label id="web">Do you ever think about how you would design a web page?</label></li>
                    <li><input type="radio" value="no" name="rad1"/><span>No</span></li>
                    <li><input type="radio" value="yes" name="rad2"/><span>Yes</span></li>
                    <li><label for="check">Which the following are your main priorities? If none, please check N/A</label> </li>
                    <li><input type="checkbox" name="op1" value="op1"/><span>Ease of Use</span></li>
                    <li><input type="checkbox" name="op2" value="op2"/> <span>Graphics & Content</span></li>
                    <li><input type="checkbox" name="op3" value="op3"/><span> The Data Collected</span></li>
                    <li><input type="checkbox" name="op4" value="op4"/><span>Securing the site from possible attacks</span></li>
                    <li><input type="checkbox" name="op2" value="op2"/><span>N/A</span></li>
                    <li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
                    <li><input type="radio" value="no" name="rad3"/><span>No</span></li>
                    <li><input type="radio" value="yes" name="rad4"/><span>Yes</span></li>
                    <li><label for="text1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
                    <li><textarea name="text1" id="text1" maxlength="3"></textarea></li>
                    <li><input type="submit" value="Finished!" id="submit"></li>
                    <li><input type="reset" id="reset"></li>
                </ul>
            </form>
<script>
    function validateForm() {
        var radio1 = document.quiz.rad1;
        var radio2 = document.quiz.rad2;
        var ch1 = document.quiz.op1;
        var ch2 = document.quiz.op2;
        var ch3 = document.quiz.op3;
        var ch4 = document.quiz.op4;
        var ch5 = document.quiz.op5;
        var radio3 = document.quiz.rad3;
        var radio4 = document.quiz.rad4;
        var tx1 = document.quiz.text1;
        function vWebRes(radio1, radio2, radio3, radio4){
            x=0;
            if(radio1.checked) || (radio2.checked) || (radio3.checked) || (radio4.checked) {
                x++;
            }
            if (x==0) {
                alert('You forgot a question!')
                radio1.focus();
                return false;
            }
            else {
                alert('Completed!');
                window.location.reload()
                return true;
            }
        }
        function vCheck(ch1, ch2, ch3, ch4, ch5){
            y=0;
            if(ch1.checked) || (ch2.checked) || (ch3.checked) || (ch4.checked) || (ch5.checked){
                y++;
            }
            if (y==0) {
                alert('You forgot a question!')
                radio1.focus();
                return false;
            }
            else {
                alert('Completed!');
                window.location.reload()
                return true;
            }
        }
        function vLenght(tx1) {
            var txLength = tx.value.length;
            if (txLength == 0 || txLength < 3) {
                alert("That is an incorrect entry, try again.")
                txLength.focus();
                return false
            }
            else {
                return true
            }
        }
        function vCheck(tx1) {
            if (tx1 == Yes && tx1 == YES && tx1 == yes) || (tx1 == No && tx1 == NO && tx1 == no) {
                tx1.focus();
                return true
            }
            else {
                return false
            }
        }
    }

</script>

answered question

1 Answer

1

You have missing braces for your if statements and functions inside are unnecessary. Your js code should be:

function validateForm() {
    var radio1 = document.quiz.rad1;
    var radio2 = document.quiz.rad2;
    var ch1 = document.quiz.op1;
    var ch2 = document.quiz.op2;
    var ch3 = document.quiz.op3;
    var ch4 = document.quiz.op4;
    var ch5 = document.quiz.op5;
    var radio3 = document.quiz.rad3;
    var radio4 = document.quiz.rad4;
    var tx1 = document.quiz.text1;

  x=0;
  if(radio1.checked || radio2.checked || radio3.checked || radio4.checked) {
    x++;
  }
  if (x==0) {
    alert('You forgot a question!')
    radio1.focus();
    return false;
  }
  else {
    alert('Completed!');
    window.location.reload()
    return true;
  }

  y=0;
  if(ch1.checked || ch2.checked || ch3.checked || ch4.checked || ch5.checked){
    y++;
  }
  if (y==0) {
    alert('You forgot a question!')
    radio1.focus();
    return false;
  }
  else {
    alert('Completed!');
    window.location.reload()
    return true;
  }

  var txLength = tx.value.length;
  if (txLength == 0 || txLength < 3) {
    alert("That is an incorrect entry, try again.")
    txLength.focus();
    return false
  }
  else {
    return true
  }

  if ((tx1 == Yes && tx1 == YES && tx1 == yes) || (tx1 == No && tx1 == NO && tx1 == no)) {
    tx1.focus();
    return true
  }
  else {
    return false
  }
}

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories