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.

Any idea?

Answer 1

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.

Answer 2

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);

Answer 3

The developer confirmed this was a bug on GitHub:

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

Answer 4

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

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