javascript - Semantic-UI Form Validation Quirk -
i'm using semantic-ui react time.
i've used semantic-ui's form , form validation in other products in past , i've never had problems such 1 going explain now.
in past when used semantic-ui's form validation, when set on property change, fields show inline error message if there change in field. however, reason, editing on field possibly trigger fields validate , show of inline errors if fields either empty or not contain correct value. not pleasing eye , prefer not have form function in way.
what possibly cause this? , how 1 avoid this?
i've setup form usual...
here example:
$('.ui.form.inputform') .form({ on: 'change', inline:true, fields: { name: { identifier: 'name', rules: [ { type:'empty', prompt: 'name required' }, { type: 'inputname', prompt: 'name taken' } ] }, month: { identifier: 'month', rules: [ { type: 'empty', prompt: 'month required' }, { type: 'isinteger', prompt: 'must non-decimal number' }, { type: 'monthrange', prompt: 'must between 1 12' } ] }, day: { identifier: 'day', rules: [ { type: 'empty', prompt: 'day required' }, { type: 'isinteger', prompt: 'must non-decimal number' }, { type: 'dayrange', prompt: 'must between 1 31' } ] }, year: { identifier: 'year', rules: [ { type: 'empty', prompt: 'year required' }, { type: 'isinteger', prompt: 'must non-decimal number' }, { type: 'yearrange', prompt: 'must between -3000 +3000' } ] }, hour: { identifier: 'hour', rules: [ { type: 'empty', prompt: 'hour required' }, { type: 'isinteger', prompt: 'must non-decimal number' }, { type: 'hourrange', prompt: 'must between 0 23' } ] }, minute: { identifier: 'minute', rules: [ { type: 'empty', prompt: 'minutes required' }, { type: 'isinteger', prompt: 'must non-decimal number' }, { type: 'minuterange', prompt: 'must between 0 59' } ] }, second: { identifier: 'second', rules: [ { type: 'empty', prompt: 'seconds required' }, { type: 'secondrange', prompt: 'must between 0 59' } ] }, timezone: { identifier: 'timezone', rules: [ { type: 'empty', prompt: 'timezone required' }, { type: 'timezonerange', prompt: 'must between -16.00 + 16.00' } ] }, longitude_degrees: { identifier: 'longdeg', rules: [ { type: 'empty', prompt: 'required' }, { type: 'isinteger', prompt: 'must number without decimal places' }, { type: 'longituderange', prompt: 'must between -180 +180' }, ] }, longitude_minutes: { identifier: 'longmin', rules: [ { type: 'empty', prompt: 'required' }, { type: 'isinteger', prompt: 'must number without decimal places' }, { type: 'minrange', prompt: 'must between 0 59' } ] }, longitude_seconds: { identifier: 'longsec', rules: [ { type: 'empty', prompt: 'required' }, { type: 'secrange', prompt: 'must between 0 number less 60' } ] }, latitude_degrees: { identifier: 'latdeg', rules: [ { type: 'empty', prompt: 'required' }, { type: 'isinteger', prompt: 'must number without decimal places' }, { type: 'latituderange', prompt: 'must between -90 +90' } ] }, latitude_minutes: { identifier: 'latmin', rules: [ { type: 'empty', prompt: 'required' }, { type: 'isinteger', prompt: 'must number without decimal places' }, { type: 'minrange', prompt: 'must between 0 59' } ] }, latitude_seconds: { identifier: 'latsec', rules: [ { type: 'empty', prompt: 'required' }, { type: 'secrange', prompt: 'must between 0 number less 60' } ] }, }, });
you're going want use "blur" event rather "change".
i put 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 javascript:
$('form').form({ on: 'blur', fields: { empty: { identifier: 'empty', rules: [{ type: 'empty', prompt: 'please enter value' }] }, dropdown: { identifier: 'dropdown', rules: [{ type: 'empty', prompt: 'please select dropdown value' }] }, checkbox: { identifier: 'checkbox', rules: [{ type: 'checked', prompt: 'please check checkbox' }] } } }); 
Comments
Post a Comment