Adding errors to form validation doesn't work?

Question

According to the Semantic UI docs on form validation, I can add errors manually:

add errors(errors) | Adds errors to form, given an array errors

(I want to use this feature because I submit my form via AJAX, do server-side validation, then want to display the results.)

I tried the following code:

$('#my-form').form("add errors", [ 'error' ]);
$('#my-form').form("validate form");

I get this contradictory output from the console when calling the above methods, and the form validates as successful when it obviously shouldn't.

enter image description here

Any idea?

Could you be more explicit? The documentation seems misleading (or at least, incomplete). I see no example usage case for custom errors, nor for manual revalidation, and Google isn't helping much. From my understanding of the docs, the two lines I posted should at least display `error` in the `ui message` div I have placed in the form. — Lazlo, Jul 18 '14 at 16:32

score 2 · Answer 1 · answered Aug 06 '14 at 19:24

To perform server-side validation via AJAX, use a custom rule:

$myForm = $('.ui.form');
var settings = {
    rules: {
        custom: function () {
            // Perform AJAX validation here
            return false;
        }
    }
};
var rules = {
    ajaxField: {
        identifier: 'ajaxField',
        rules: [{
            type: 'custom',
            prompt: 'Custom error!'
        }]
    }
};
$myForm.form(rules, settings);

Here it is in action: http://jsbin.com/sufiwafe/1/edit

For how to use callbacks and form validation in general, there is an important discussion on the Semantic-UI issues page on GitHub. The author mentions:

... the documentation was ambiguous but validation + settings is passed like $(".form').form(rules, settings);

score 1 · Answer 2 · answered Aug 05 '14 at 17:56

It appears like you are trying to recreate the wheel when using semantic ui. Assuming you have included the complete versions of semantic.css in the head and semantic.js just above the body closing tag, here is an abbreviated version of working code for a simple contact form with some of the error work done by semantic and some by html5. For completeness I have included a user side captcha. HTML

<form class="ui form" name="contact_sdta" action="" method="post">
    <div class="field">
        <label>Your Email </label>
        <div class="ui left labeled icon input">
            <input name="email" id="email" placeholder="name@mail.com" type="email">
            <i class="mail icon"></i>
            <div class="ui corner label">
                <i class="asterisk  red icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Subject</label>
        <div class="ui left labeled icon input">
            <input name="subject" id="subject" placeholder="I am interested in more information about" type="text">
            <i class="text file outline icon"></i>
            <div class="ui corner label">
                <i class="asterisk red icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Message</label>
        <div class="ui left labeled icon input">
            <textarea name="message"></textarea>
            <i class="text file outline icon"></i>
            <div class="ui corner label">
                <i class="asterisk red icon"></i>
            </div>
        </div>
    </div>
    <div class="ui buttons">
        <input type="reset" value="Cancel" class="ui button">
        <div class="or"></div>
        <input type="submit" value="Submit" class="ui blue submit button">
    </div>
    <div class="ui error message"></div>
</form>

mainjs

    $(function(){
 $('form input[type=reset]')
            .before('<div>Are you a human? <input type="checkbox" name="captcha" /><i class="asterisk red icon"></i></div><br />');
        $('.ui.form').form({
            email: {
                identifier: 'email',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter your email'
                    }
                ]
            },
            subject: {
                identifier: 'subject',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a subject'
                    }
                ]
            },
            message: {
                identifier: 'message',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a message'
                    }
                ]
            },
            human: {
                identifier: 'captcha',
                rules: [
                    {
                        type: 'checked',
                        prompt: 'You must behuman'
                    }
                ]
            }
        });
    });

I hope this helps to clear things up.

score 1 · Accepted Answer · answered Aug 07 '14 at 18:34

1

The developer confirmed this was a bug on GitHub:

https://github.com/Semantic-Org/Semantic-UI/issues/959

answered Aug 07 '14 at 18:34

Lazlo

8,518
14
77
116

score -1 · Answer 4 · answered Apr 06 '15 at 10:39

-1

MVC5: Try Add this in the lowermost part of your View

@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

answered Apr 06 '15 at 10:39

ronIT

1,035
1
9
6

Adding errors to form validation doesn't work?

4 Answers4

Linked