语义UI表单验证怪癖

Question

I'm using Semantic-UI with React this time.

I've used Semantic-UI's form and form validation in other products in the past and I've never had problems such as the one I am going to explain now.

In the past when I used Semantic-UI's form validation, when I set the on property to change , the fields only show the inline error message if there is a change in that field. However, now for some reason, editing on field could possibly trigger all fields to validate and show all of the inline errors if those fields are either empty or do not contain the correct value. This is not so pleasing to the eye and I would prefer to not have the form function in this way.

What could possibly cause this? and how does one avoid this?

I've setup my form as usual...

Here is an example:

$('.ui.form.inputform')
        .form({
            on: 'change',
            inline:true,
            fields: {
                name: {
                  identifier: 'name',
                  rules: [
                    {
                      type:'empty',
                      prompt: 'Name is required'
                    },
                    {
                      type: 'inputName',
                      prompt: 'Name already taken'
                    }
                  ]
                },
                month: {
                  identifier: 'month',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Month required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a non-decimal number'
                    },
                    {
                      type: 'monthRange',
                      prompt: 'Must be between 1 to 12'
                    }
                  ]
                },
                day: {
                  identifier: 'day',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Day required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a non-decimal number'
                    },
                    {
                      type: 'dayRange',
                      prompt: 'Must be between 1 to 31'
                    }
                  ]
                },
                year: {
                  identifier: 'year',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Year required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a non-decimal number'
                    },
                    {
                      type: 'yearRange',
                      prompt: 'Must be between -3000 to +3000'
                    }
                  ]
                },
                hour: {
                  identifier: 'hour',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Hour required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a non-decimal number'
                    },
                    {
                      type: 'hourRange',
                      prompt: 'Must be between 0 to 23'
                    }
                  ]
                },
                minute: {
                  identifier: 'minute',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Minutes required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a non-decimal number'
                    },
                    {
                      type: 'minuteRange',
                      prompt: 'Must be between 0 to 59'
                    }
                  ]
                },
                second: {
                  identifier: 'second',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Seconds required'
                    },
                    {
                      type: 'secondRange',
                      prompt: 'Must be between 0 to 59'
                    }
                  ]
                },
                timezone: {
                  identifier: 'timezone',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Timezone required'
                    },
                    {
                      type: 'timezoneRange',
                      prompt: 'Must be between -16.00 to + 16.00'
                    }
                  ]
                },

                longitude_degrees: {
                  identifier: 'longdeg',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a number without decimal places'
                    },
                    {
                      type: 'longitudeRange',
                      prompt: 'Must be between -180 to +180'
                    },
                  ]
                },
                longitude_minutes: {
                  identifier: 'longmin',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a number without decimal places'
                    },
                    {
                      type: 'minRange',
                      prompt: 'Must be between 0 to 59'
                    }
                  ]
                },
                longitude_seconds: {
                  identifier: 'longsec',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Required'
                    },
                    {
                      type: 'secRange',
                      prompt: 'Must be between 0 to any number less than 60'
                    }
                  ]
                },


                latitude_degrees: {
                  identifier: 'latdeg',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a number without decimal places'
                    },
                    {
                      type: 'latitudeRange',
                      prompt: 'Must be between -90 to +90'
                    }
                  ]
                },
                latitude_minutes: {
                  identifier: 'latmin',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Required'
                    },
                    {
                      type: 'isInteger',
                      prompt: 'Must be a number without decimal places'
                    },
                    {
                      type: 'minRange',
                      prompt: 'Must be between 0 to 59'
                    }
                  ]
                },
                latitude_seconds: {
                  identifier: 'latsec',
                  rules: [
                    {
                      type: 'empty',
                      prompt: 'Required'
                    },
                    {
                      type: 'secRange',
                      prompt: 'Must be between 0 to any number less than 60'
                    }
                  ]
                },
            },


        });

Answer 1

You're going to want to use the "blur" event rather than "change".

I put together a quick demo demonstrating this:

<form>
    <div class="field">
        <label>Field 1</label>
        <input name="empty" type="text" placeholder="My first field...">
    </div>
    <div class="field">
        <label>Field 2</label>
        <input name="empty" type="text" placeholder="My second field...">
    </div>
    <div class="field">
        <label>Dropdown</label>
        <select class="ui dropdown" name="dropdown">
            <option value="">Select</option>
            <option value="male">Choice 1</option>
            <option value="female">Choice 2</option>
        </select>
    </div>
    <div class="inline field">
        <div class="ui checkbox">
            <input type="checkbox" name="checkbox">
            <label>Checkbox</label>
        </div>
    </div>
    <div class="ui submit button">Submit</div>
    <div class="ui error message"></div>
</form>

Compare to your JavaScript:

$('form').form({
    on: 'blur',
    fields: {
        empty: {
            identifier: 'empty',
            rules: [{
                type: 'empty',
                prompt: 'Please enter a value'
            }]
        },
        dropdown: {
            identifier: 'dropdown',
            rules: [{
                type: 'empty',
                prompt: 'Please select a dropdown value'
            }]
        },
        checkbox: {
            identifier: 'checkbox',
            rules: [{
                type: 'checked',
                prompt: 'Please check the checkbox'
            }]
        }
    }
});

( http://codepen.io/appsoa/pen/BoxQeL )