javascript validation on Submit button

Question

Want to use javascript validation to work when i click submit button. What happens now is even if i enter a low value the value submits. but i need to check the validation before i click submit...

This is the Javascript:

$(function () {
   $("#newMonoReading").on('focusout', function () {
       var str = "";

        var initialMonoReading = $('#InitialMonoReading').val();
        var newMonoReading = $('#newMonoReading').val()
        if (~~newMonoReading < ~~initialMonoReading) {
            $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
            $('#MonoErrorMessage').show();
        } else {
            $('#MonoErrorMessage').hide();
        }
    });
});

Now on my form, you can see the input type (Submit)

<div class="modal-footer">
<input type="submit" value="Submit New Readings" class="btn btn-primary">

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>

How do i get the JavaScript function to the submit button, so when i enter submit it wont work because i have entered a low value.

Answer 1

function validateForm() {
   var str = "";

    var initialMonoReading = $('#InitialMonoReading').val();
    var newMonoReading = $('#newMonoReading').val();
    if (~~newMonoReading < ~~initialMonoReading) {
        $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
        $('#MonoErrorMessage').show();
        return false;
    } else {
        $('#MonoErrorMessage').hide();
    }
}

This example will clear things FIDDLE

    <form onsubmit="return validateForm()" method="post">
    <div class="modal-footer">
    <input type="submit"  value="Submit New Readings" class="btn btn-primary">

    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
    </fieldset>
    </form>

Answer 2

You don't actually want the validation on the submit button, since there are other ways to submit a form. You actually want the validation the the form's onsubmit handler.

Now, that said, you haven't shown enough of your code to know where the problem is, but I can take a good guess.

Before this line:

$("#newMonoReading").on('focusout', function () {

Add this line:

alert($("#newMonoReading").length);

There is a good chance you are trying to run this code before the DOM has been rendered. If that returns 0 , you have three choices:

• Use event delegation (overkill in this case)
• Move the code inside a $(function() {...}); block
• Load the scripts at the bottom of the page.

Answer 3

Change the submit button to button In this way, you will have full control of the submit. You can perform your own logic in the validate() function and decide whether allow the form to submit or not

<input type="button" onclick="validate()" value="Submit New Readings" class="btn btn-primary">

and your the validate function will be

function validate () {
   var initialMonoReading = $('#InitialMonoReading').val();
   var newMonoReading = $('#newMonoReading').val()
   if (~~newMonoReading < ~~initialMonoReading) 
  {
     alert("Value is not valid");
     return;
  }
  ///else submit
   $("yourform").submit();
});