how to validate a form without displaying any error messages

Question

I do not understand how I can validate a form with jquery validate to display the Submit button or not.

My javascript is as follows:

ko.bindingHandlers.jqValidate = {
init: function (element, valueAccessor, option) {

    var element = element;

    var validateOptions = {
        ignore: [":hidden:not(required)"],
        focusCleanup: true,
        onsubmit: true
    };

    function displaySubmitButton() { // Remove/Add class to submit button
        if ($('form').valid()) $('.toSave').show();
        else $('.toSave').hide();
    }

    $('form').bind('onchange keyup onpaste', function (event, element) {
        if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
        else if ($(element).not('.resetForm')) $('.toSave').hide();
    });
}
};

My form :

<ol class="MutColor13 mouseOver" data-bind="jqValidate: {}">
    <li class="rightCol">
        <strong>
            <label for="iEmailReply"><asp:Literal runat="server" ID="lEmailReply" /></label>
        </strong>
        <input id="iEmailReply" name="EmailReply" type="text" tabindex="2"
            class="MutColor13 email"
            data-bind="value: communication.Message.ReplyEmail, valueUpdate: 'afterkeydown'"
            required="required" />
    </li>
    <li class="leftCol">
        <strong>
            <label for="iEmailFrom"><asp:Literal runat="server" ID="lEmailFrom" /></label>
        </strong>
        <input id="iEmailFrom" name="EmailFrom" type="text" tabindex="1"
            class="MutColor13 email"
            data-bind="value: communication.Message.SenderEmail, valueUpdate: 'afterkeydown'"
            required="required" />
    </li>
    <!-- and more form input -->
</ol>

My submit button :

<div class="buttonBlock rightButton"  data-bind="fadeVisible: validateMessage()">
    <a class="MutButton3 toSave" data-bind="click: saveMessage"><span class="MutButton3">submit</span></a>
</div>

when I type "$ ('form'). valid ()" in the firebug console, all error messages appear. I do not think the submit button is the problem because I have not clicked at this point

How do I enable the display of the error message from the input short change while allowing the display of the submit button if fields (and any other form fields in the page) if all fields are valid?

I was inspired by this question: jquery validate: IF form valid then show submit button

a working demo : http://jquery.bassistance.de/validate/demo/ but the button is displayed continuously

you can see in the last part of my question script. The button is displayed without problem, my problem is rather in displaying any error messages that I type anything into a form — Frédéric by FTS, Aug 08 '13 at 11:05
so is not your displaySubmitButton() which is problematic but is something wrong with the valid() function displaying error message before form is submitted - nop? — Alex Garulli, Aug 08 '13 at 11:15
when I type "$ ('form'). valid ()" in the firebug console, all error messages appear. I do not think the submit button is the problem because I have not clicked at this point, I want to fill in the fields without having any error messages that appear suddenly. Only the error of input in court changes should display an error message. The other fields should keep their original state as I made no change over. — Frédéric by FTS, Aug 08 '13 at 11:27
it s ok we can try get the form working and the implement it — Alex Garulli, Aug 08 '13 at 11:42
I did this http://jsfiddle.net/Ay972/5/ -- not sure if what you want...exactly when the submit button suppose to appear. In this s appearing just when enter a valid email. — Alex Garulli, Aug 08 '13 at 12:37
ok http://jsfiddle.net/Ay972/6/ now the submit button stays there like in the demo u send, I didn't get when u want it to appear and when disappear — Alex Garulli, Aug 08 '13 at 12:48
Oh thank you, error messages no longer appear all of a sudden the first edition of one of the inputs. I see you've deleted some events that caused the buttons displayed :), but that ALL the error messages. My mistake was there :/ But the button is displayed all the time. While it does appear that if the form is valid. — Frédéric by FTS, Aug 08 '13 at 13:11
so ...we don't want the error message and we want the submit button just to appear if the form is filled & valid? — Alex Garulli, Aug 08 '13 at 13:13
The error messages can be displayed on well, but only one at a time, ie it is displayed only for the input that we are in the process of change. The eventual errors other form fields messages should not be displayed until the input has not changed was. The button should be displayed if all form fields are valid. — Frédéric by FTS, Aug 08 '13 at 13:29
ok I think the error mex are working ....need to sort out the buttom — Alex Garulli, Aug 08 '13 at 13:31

Alex Garulli · Accepted Answer · 2014-01-07T14:42:38.913

0

ok I think this could work:

http://jsfiddle.net/Ay972/10/

what I did :

  $('form').bind('change oninput', function (event, element) {
        console.log('formLive :: ', $(event));

        if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
        else if ($(element).not('.resetForm')) $('.toSave').hide();
    });

the 'change oninput' seems to work.

edited Jan 07 '14 at 14:42

answered Aug 08 '13 at 14:29

Alex Garulli

737
1
12
29

Not really, but closed ! The button disappear on first invalid, that's OK, but it don't come back when both are valid without click anywhere except input (or press Tab). The button should appear when the form is valid – Frédéric by FTS Aug 08 '13 at 15:11
yep but you need to press enter or tab otherwise the form is not never gonna be valid - it's not possible what you are asking – Alex Garulli Aug 08 '13 at 15:17
humm ok :(. Not possible to do without causing display of all error messages. I tried the "success" the "message" error disappeared but the container still visible ... I'm going to cry in a corner :(. Thanks a lot for your help and your time ! I confirm the answer because it meets the primary need :) – Frédéric by FTS Aug 08 '13 at 15:31
I don't see why the basic logic of this answer can't be placed inside the submitHandler callback function. – Sparky Aug 08 '13 at 15:40
what you mean? it d be possible to have the submit button appear when u insert a write email without press enter or tab? – Alex Garulli Aug 08 '13 at 15:43
as explained at http://stackoverflow.com/questions/13031376/jquery-validate-if-form-valid-then-show-submit-button – Alex Garulli Aug 08 '13 at 15:44

how to validate a form without displaying any error messages

1 Answers1