Jump to content

Recommended Posts

Hello all,

I have a quick question that should actually be really simple but I haven’t been able to find it online through MANY searches. I have an HTML form and a submit button. In the form I have an ‘onsubmit()’ event which does validation. How do I call a submit function after I return my onsubmit value if true do ‘thissubmit()’

I currently have a onsubmit function()

If my function returns true then I call -  document.forms["formsignin"].submit();      return true;

That goes to my jQuery ‘$(myForm).on("submit", function () {}’

I want to do this in JavaScript ONLY and NOT with the $( myform).on() jQuery way.

<form id="fsignin" onsubmit="return validateit();">
...
<button type=”submit”>Sign in</button>
</form>
Function validateit() { do validation stuff if(….){document.forms["formsignin"].submit();      return true;
}
}
$(myForm).on("submit", function () {

    if (validateit()) {}
}

 

Why do you want to call .submit() on the form?

The way a submit handler is supposed to work is you do your validation and if it fails you cancel the submit event.  Otherwise you allow the submit event to proceed and the browser will submit the form.

$(myForm).on("submit", function(e){
    if (!validateit()){
        e.preventDefault();
    }
});

function validateit(){
  //Do your validations
  //Return true or false
}

 

 

$(myForm).on("submit", function(e){
    if (validateit()){
      //created message and displayed in a div
    } else {
         e.preventDefault();

    }
});

function validateit(){
  //Do your validations
  //Return true or false
  if true
  document.forms["formsignin"].submit();
}

not valid I display a message saying unsuccessful and I display why its not valid. I wanted to do this in only JavaScript and not using the jQuery selectors.

 

Is there a way I can call this in purely JavaScript and not jQuery $(myForm).on("submit", function(e){

If you don't want to submit, return false from your validate function.

EG

<html>
<head>
<title>test</title>
<script type='text/javascript'>
 
   function checkData() {
       return document.getElementById('chck').value != ''
   }
    
</script>
</head>
<body>
<form onsubmit='return checkData()'>
    <input type='text' name='chck' id='chck' value=''>
    <input type='submit' name='btnSub' id='Submit'>
</form></body>
</html>

 

The plain javascript way to attach event listeners is to use the addEventListener method.  Other than that it's the same.

document.forms["formsignin"].addEventListener('submit', function(e){
  if (!validateIt()){
    e.preventDefault();
  }
});

function validateIt(){
  //Do your validations
  return true; //or false
}

Do your validations and if your validation fails call e.preventDefault().

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.