Alert() Loop in JavaScript

Question

I am extremely new to JS, but right now I am trying to create a form validation method that continually checks that all entries are not equal to NaN or NULL (I described this as ""). However I think I am utilizing the "alert()" function incorrectly and it does not stop checking long enough for someone to reenter the information.

My logic was to remain in "checkblanks" function while it returned a Boolean "false", but instead my alert message won't stop displaying on the screen.

---

Then when I force "stop" the alert through Firefox, and fill out the x1, x2, x3 fields, it prints out operations function twice.

---

My JS

//Direction Toggle
$("p, #answer").hide();

$("h1").click(function () {
    $(this).next().slideToggle(300);
});

function testResults(form) {

//Form validation
while (checkblanks(form) == false) {
    alert("Please fill in all numeric values");
    checkblanks(form);
}

function checkblanks(pform1) {
    var display = "";

    if (pform1.x1.value == "" || pform1.x1.value == NaN) {
        display += "x1, ";
    }

    if (pform1.x2.value == "" || pform1.x2.value == NaN) {
        display += "x2, ";
    }

    if (pform1.x3.value == "" || pform1.x3.value == NaN) {
        display += "x3";
    }
    if (display != "") {
        return false;
    } else {
        return true;
    }
}

//Complete operations if you're all set!
operations(form);

function operations(form) {
    //JQuery Answer Show
    $(".button").click(function () { //after form submission
        $(".matrix").slideUp(1000, function () { //hiding the matrix form
            $("#answer").slideDown(1000); //and display the answer
        });
    });

    //System Class Local to operations function
    function system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3) {
        this.x1 = x1;
        this.x2 = x2;
        this.x3 = x3;
        this.y1 = y1;
        this.y2 = y2;
        this.y3 = y3;
        this.z1 = z1;
        this.z2 = z2;
        this.z3 = z3;
        this.a1 = a1;
        this.a2 = a2;
        this.a3 = a3;
        this.calcDanswer = function () {
            return (this.x1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * D.y3) - (this.y2 * this.x3)));
        };
        this.calcXanswer = function () {
            return (this.a1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) + (this.z1 * ((this.a2 * this.y3) - (this.y2 * this.a3)));
        };
        this.calcYanswer = function () {
            return (this.x1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) - (this.a1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * this.a3) - (this.a2 * this.x3)));
        };
        this.calcZanswer = function () {
            return (this.x1 * ((this.y2 * this.a3) - (this.a2 * this.y3))) - (this.y1 * ((this.x2 * this.a3) - (this.a2 * this.x3))) + (this.a1 * ((this.x2 * this.y3) - (this.y2 * this.x3)));
        };
    }

    //Assign x1-a3
    var x1 = form.x1.value;
    var x2 = form.x2.value;
    var x3 = form.x3.value;
    var y1 = form.y1.value;
    var y2 = form.y2.value;
    var y3 = form.y3.value;
    var z1 = form.z1.value;
    var z2 = form.z2.value;
    var z3 = form.z3.value;
    var a1 = form.a1.value;
    var a2 = form.a2.value;
    var a3 = form.a3.value;

    //Pass to constructor and calculate
    var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
    var X = D.calcXanswer() / D.calcDanswer();
    var Y = D.calcYanswer() / D.calcDanswer();
    var Z = D.calcZanswer() / D.calcDanswer();


    // printing to console
    var out = document.getElementById('real-answer');
    out.innerHTML += "<b>The equations you entered were:</b>" + "<br />" + D.x1 + "x + " + D.y1 + "y + " + D.z1 + "z = " + D.a1 + "<br />" + D.x2 + "x + " + D.y2 + "y + " + D.z2 + "z = " + D.a2 + "<br />" + D.x3 + "x + " + D.y3 + "y + " + D.z3 + "z = " + D.a3 + "<br /><br />" +

        "The answer for <b>D</b> is " + D.calcDanswer() + "<br />" +
        "The answer for <b>Dx</b> is " + D.calcXanswer() + "<br />" +
        "The answer for <b>Dy</b> is " + D.calcYanswer() + "<br />" +
        "The answer for <b>Dz</b> is " + D.calcZanswer() + "<br />" +
        "<b>X</b> is " + X + "<br />" +
        "<b>Y</b> is " + Y + "<br />" +
        "<b>Z</b> is " + Z + "<br />" + "<br />";
    }
}

My HTML

<body>
    <!--DIRECTIONS & FORM-->
    <div class="matrix">
            <h1><span id="highlight">How Does This Work?</span></h1>

        <p>Type in all the information for your system of three equations.
            <br />When finished, hit "Go".</p>
        <!--Form-->
        <FORM NAME="myform" id="form" ACTION="" METHOD="GET">
            <input type="text" name="x1" />x +
            <input type="text" name="y1" />y +
            <input type="text" name="z1" />z =
            <input type="text" name="a1" />
            <br />
            <input type="text" name="x2" />x +
            <input type="text" name="y2" />y +
            <input type="text" name="z2" />z =
            <input type="text" name="a2" />
            <br />
            <input type="text" name="x3" />x +
            <input type="text" name="y3" />y +
            <input type="text" name="z3" />z =
            <input type="text" name="a3" />
            <br />
            <input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)" />
        </FORM>
        <!--....................................-->
    </div>
    <!--ANSWER-->
    <div id="answer">
         <h1><span id="highlight">The Answer:</span></h1>

        <div id='real-answer'></div>
    </div>
</body>

Unfortunately the jsfiddle I created isn't displaying the way my browser is displaying the webpage, but this is my code: http://jsfiddle.net/Xqd5W/

Answer 1

Instead of a while-loop, alert the error message and return false:

if(checkblanks(form) === false) {
    alert("Please fill in all numeric values");
    return false;
}

After all, you cannot continue, and the user should use the submit/go button again after he corrected his mistakes. Also, continuously checking things isn't the way to go in JavaScript, instead, you would listen to events, such as form value changes, and react on them.

The duplicate answer issue

The first action in operations is to add an event listener to the submit button:

function operations(form) {
  $(".button").click(function () { //after form submission
        $(".matrix").slideUp(1000, function () { //hiding the matrix form
            $("#answer").slideDown(1000); //and display the answer
        });
    });

You do this in order to hide the .matrix and in order to show the answer, whenever the button is pressed after this. However, that's not what you actually want to do. Instead, you want to hide the .matrix and show the #answer at this point. Instead of adding an event listener, do the actions exactly at this point:

function operations(form) {
    $(".matrix").slideUp(1000, function () { //hiding the matrix form
        $("#answer").slideDown(1000); //and display the answer
    });
    // ...

Even better, do those steps at the end of operations, right after you edited the innerHTML of your answer.

Answer 2

<input type="number" required />

Problem solved.

Answer 3

Instead of a while-loop, listen for the 'submit' event. For example:

$('input').on('submit',function(){
    checkblanks(form);
});