0

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.

Improve this question
3
  • use button instead of submit Commented Nov 17, 2014 at 9:37
  • @Edrich: If you want to submit a form, use a submit button. Commented Nov 17, 2014 at 9:38
  • @Amberlamps you can submit button using jquery. Commented Nov 17, 2014 at 9:40

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

A copy and paste isn't going to help someone understand. The point of having someone help you with a problem is to understand the issue in hand and learn how to fix it, not just copy/paste. Plenty of free source out there for that.
what i want is, when i click submit the readings must be higher than the existing reading. at the moment if its lower it still submits the form, but i dont want that to happen, i want the javascript error to show if the values are lower when i click submit button
@NewToJS i think it was pretty simple to understand ..anyways updated my answer to make it more clear..
@mali Please try this code and let me know .. i am sure if your code of checking initialmonoreading is correct .. it will work as you wish
You think it is because you know how to fix it. For those who haven't used this method won't understand it. Sometimes you have to be clear and explain what the source is doing rather than assume everyone has the same knowledge as you. Not trying to be awful or anything but it's true.
|
0

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.
Improve this answer

4 Comments

what i want is, when i click submit the readings must be higher than the existing reading. at the moment if its lower it still submits the form, but i dont want that to happen, i want the javascript error to show if the values are lower when i click submit button
I had a slight oops, I meant onsubmit' -- not submit. Fixed. That will still get triggered if the user uses the submit button, or presses ENTER to submit the form.
this has made it worse, when i click the button, an alert appears (1). then when i click submit it doesnt work and gives error in code. i just dont want user to carry on until the message has gone
Ok.. the alert(1) means the element does exist -- which is what we needed to check for. I"ll delete this answer in a few minutes.
0

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();
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.