Html Form Action and Onsubmit Issues

HTML form action and onsubmit issues

You should stop the submit procedure by returning false on the onsubmit callback.

<script>
    function checkRegistration(){
        if(!form_valid){
            alert('Given data is not correct');
            return false;
        }
        return true;
    }
</script>

<form onsubmit="return checkRegistration()"...

Here you have a fully working example. The form will submit only when you write google into input, otherwise it will return an error:

<script>
    function checkRegistration(){
        var form_valid = (document.getElementById('some_input').value == 'google');
        if(!form_valid){
            alert('Given data is incorrect');
            return false;
        }
        return true;
    }
</script>

<form onsubmit="return checkRegistration()" method="get" action="http://google.com">
    Write google to go to google...<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>

Issue with action and onsubmit in form

Since $.ajax is asynchronous, you can't use the return value of the success function.

You need to prevent the default submission immediately, then call submit() in the success function.

Also, in the data: option you need to get the value of an input, the input element itself.

function validateInput() {  // some validation code  $.ajax({
    url: "validate_credentials",    type: 'POST',    data: {      data: $("#data").val()    },    dataType: 'json', // added data type
    success: function(res) {
      if (res && valid) {
        $("#bigerror").innerHTML = res;        $("#edit-input").submit();      }    }  });  return false;}

html - use onsubmit and action together

If you attach an onsubmit event handler and it returns false, the form will not be submitted. In your case, that always happens, even if the input is valid.

You check allLetter(), then ValidateEmail() and checkDate(), but you don't return true when they're all valid. Your code continues and it reaches return false;. The submit event handler returns the result of that validation function (which is false), so it returns false too. This tells the form to not submit.

Change your validation function to this:

function formValidation() {
  var name = document.registration.name;
  var uemail = document.registration.email;

  if (allLetter(name) && ValidateEmail(uemail) && checkDate()) {
    return true;
  } else {
    return false;
  }
}

If all three checks return true, the validation function will return true as well and the form will be submitted.

Note: You had one unnecessary pair of brackets ({}), I removed them. I also improved readability by combining all the nested if statements into one.

Edit: Also, your checkDate() doesn't return true and false accordingly. It returns undefined by default, which is a falsy value. This means that it won't pass the validation function's && check and the form won't get submitted. Change checkDate() to this:

function checkDate() {
  var selectedText = document.getElementById('datepicker').value;
  var selectedDate = new Date(selectedText);
  var now = new Date();
  if (selectedDate < now) {
    alert("Date must be in the future");
    return false;
  } else {
    return true;
  }
}

Edit 2: You also incorrectly get the values of your input elements. When you do this:

var name = document.registration.name;
var uemail = document.registration.email;

You get the HTML element with name attribute name and HTML element with name attribute email. You should get the elements' values:

var name = document.registration.name.value;
var uemail = document.registration.email.value;

It's best to edit your answer and add the full HTML and JavaScript. There might be more problems.

A form's action and onsubmit: Which executes first?

If action was resolved first, then the browser would leave the page, the JS execution environment would go away, and there would be nowhere to run the JS in onsubmit, so it isn't.

Event handlers run before default actions. They can cancel default actions.

Html Form Action and Onsubmit Issues