Question

I have a code below where it contains a form which contains text inputs a drop down menu:

$editsession = "
    <form id='updateCourseForm'>

        <p><strong>Current Course Details:</strong></p>
        <table>
        <tr>
        <th>Course ID:</th>
        <td><input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /> </td>
        </tr>

        </table>
        <div id='currentAlert'></div>

        <p><strong>New Course Details:</strong></p>
        <table>
        <tr>
        <th>Course ID:</th>
        <td><input type='text' id='newCourseNo' name='CourseNoNew' value='' /> </td>
        </tr>
        </table>
        <div id='newAlert'></div>

        </form>

        <p id='submitupdatebtn'><button id='updateSubmit'>Update Course</button></p>

    ";

    echo $editsession;

Now I want to validate the form using Javascript and below is the code for the javascript validation:

function editvalidation() {

var isDataValid = true;

var currentCourseO = document.getElementById("currentCourseNo");
var newCourseNoO = document.getElementById("newCourseNo");

var currentCourseMsgO = document.getElementById("currentAlert");
var newCourseMsgO = document.getElementById("newAlert");


if (currentCourseO.value == ""){
currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
$('#newAlert').hide();
isDataValid = false; 
}else{
currentCourseMsgO.innerHTML = ""; 
}


if (newCourseNoO.value == ""){
newCourseMsgO.innerHTML = "Please fill in the Course ID in your Edit";
$('#newAlert').show();
isDataValid = false;
} else{
newCourseMsgO.innerHTML = ""; 
}


return isDataValid;

}

Now this is the problem I am getting:

What I am trying to state in my javascript validation is that if the #currentCourseNo is empty (text input is blank), then it displays the error message for this which belongs to the div tag #currentAlert, but it hides messages which are displayed in the div tag #newAlert. If the #currentCourseNois not empty then show the #newAlert error messages if there are any.

The problem I am having is that it is still showing the #newAlert error messages when the #currentCourseNo text input is empty, when it really should be hidden. What needs to be changed in the javascript above in order to achieve what I want to achieve?

Answer 1

First, learn about jQuery.

For your process, my common flow is to add a first pass of validation on the blur event of the inputs, and a second (exactly the same) pas of validation on the submit event of the form, something like :

var error = $('.errormsg');

var checks =
{
  "fieldName1": function(val) { return /*true or an error string*/ },
  "fieldName2": function(val) { return /*true or an error string*/ }
};

$('input')
.focus(function()
{
  $(this).removeClass('error');
})
.blur(function()
{
  error.slideUp(200);

  var check = checks[this.name];
  if (!check) { return; }

  var validation = check(this.value);

  if (typeof validation === "string")
  {
    $(this).addClass('error');
    error.text(validation).slideDown(200);
  }
});

$('form').submit(function(e)
{
  //e.preventDefault();

  if ($('input.error').length != -1)
  {
    error.text('All fields are required').slideDown(200);
    return;
  }

  for(var check in checks)
  {
    var field = $('input[name="' + check + '"]');
    if (field.length == -1) { continue; }

    var validation = check(field.val());

    if (typeof validation === "string")
    {
      field.addClass('error');
      error.text(validation).slideDown(200);
      return;
    }
  }
});