jConfirm box not appearing

Question

I have a javascript function that gets called when a form submission button is clicked, to do some validation. If everything is okay a plain javascript confirm window is executed to ensure the users wants to submit the form. However, I want to use jConfirm to tailor the title to my needs instead of "So and so page says: ".

Here's what I have:

function validate(form) {
  var fieldcheck = true;

  if(!checkUSPhone (form.elements["phonenumber"],true))
    fieldcheck = false;
  if(!checkEmail (form.elements["emailaddress"],true))
    fieldcheck = false;

  if(fieldcheck) {
    jConfirm(("Submit Changes"), 'Are you sure?', function(fieldcheck) {
        if(fieldcheck)
        {
            alert("True");
            fieldcheck = true;
        }
        else
        {
            alert("False");
            fieldcheck = false;
        }
    });
  }

  return fieldcheck;
}

I am using jQuery v1.7.2 and have jquery.alert.js v1.0.3 and the jquery.alert.css file linked to the page.

However, when the user submits the form no box appears and the page submits. I've looked at other examples on here and my syntax matches what's been said to be correct.

What am I missing?

Answer 1

Like epascarello is suggesting, you only need to make a few changes to your code:

function validate(form) {
  var fieldcheck = true;

  if(!checkUSPhone (form.elements["phonenumber"],true))
    fieldcheck = false;
  if(!checkEmail (form.elements["emailaddress"],true))
    fieldcheck = false;

  if(fieldcheck) {
    jConfirm(("Submit Changes"), 'Are you sure?', function(fieldcheck) {
        if(fieldcheck)
        {
            alert("True");
            form.submit();// The user has confirmed, we proceed to submit.
        }
        else
        {
            alert("False");
            fieldcheck = false;
        }
    });
  }

  return false;// Prevent submit. We'll submit the form after the user has confirmed through jConfirm.
}