Form validation

Submit
Reset
Clear

<form class="ui form segment">
    <div class="two fields">
        <div class="field">
            <label>Name</label>
            <input placeholder="First Name" name="name" type="text">
        </div>
        <div class="field">
            <label>Gender</label>
            <div class="ui selection dropdown">
                <input name="gender" type="hidden">
                <div class="default text">Gender</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item" data-value="male">Male</div>
                    <div class="item" data-value="female">Female</div>
                </div>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Username</label>
        <input placeholder="Username" name="username" type="text">
    </div>


    <div class="field">
        <label>Password</label>
        <input name="password" type="password">
    </div>
    <div class="inline field">
        <div class="ui checkbox">
            <input name="terms" type="checkbox">
            <label>I agree to the terms and conditions</label>
        </div>
    </div>
    <div class="ui primary submit button">Submit</div>
    <div class="ui reset button">Reset</div>
    <div class="ui clear button">Clear</div>
</form>
    

$('.ui.form')
    .form({
        inline: true,
        on: 'blur',
        fields: {
            name: {
                identifier: 'name',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter your name'
                    }
                ]
            },
            skills: {
                identifier: 'skills',
                rules: [
                    {
                        type: 'minCount[2]',
                        prompt: 'Please select at least two skills'
                    }
                ]
            },
            gender: {
                identifier: 'gender',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please select a gender'
                    }
                ]
            },
            username: {
                identifier: 'username',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a username'
                    }
                ]
            },
            password: {
                identifier: 'password',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a password'
                    },
                    {
                        type: 'minLength[6]',
                        prompt: 'Your password must be at least {ruleValue} characters'
                    }
                ]
            },
            terms: {
                identifier: 'terms',
                rules: [
                    {
                        type: 'checked',
                        prompt: 'You must agree to the terms and conditions'
                    }
                ]
            }
        }
    })
;
    
Xem thêm về validation tại đây : Link