Why does calling this Javascript function submit my form?

debugcn Published at Dev

hsbsid

I have a form validation script. Unless all conditions are met, the ambiguous function associated with form.onclick returns false (form doesn't submit). I have another function which upon error will append an error message to the errorLog div.

  function addError (msg) {
    msg = document.createTextNode(msg);
    br = document.createElement("br");
    errorLog.append(msg);
    errorLog.append(br);
    alert("yes");
  }

If an error is found, calling this function submits the form. The script doesnt even enter the function, it simply submits the data and refreshes. I realize there is an error in the function, but i cant seem to figure it out.

edit: more of my code

  form.onsubmit = function () 
  {
    if (nameCheck(fname, lname))
      return true;

    return false; 
  };

function that checks if "name" field is valid:

function nameCheck (fname,lname)
{
  if (("/\d/").test(fname) || ("/\d/").test(lname))
  {
    addError('Your name cannot contain numbers.');
    valid = false;
  }
}

user4639281

You're not stopping the form from submitting.

Use e.preventDefault() to temporarily stop the form from submitting, then if the form is correct use this.submit() to finish submitting the form

form.onsubmit = function (e) {
    e.preventDefault();
    if (nameCheck(fname, lname)) {
        this.submit();
        return true;
    }
    return false; 
};

Also, nameCheck will never resolve true, as it doesnt return anything. It should look like this

function nameCheck (fname,lname) {
  if (("/\d/").test(fname) || ("/\d/").test(lname)) {
    addError('Your name cannot contain numbers.');
    return false;
  }
  return true;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.