Anomaly in Form Validation with Semantic-UI

This time around, I am implementing Semantic-UI with React.

In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will address below.

Previously, when setting the on property to change for Semantic-UI's form validation, inline error messages would only appear if changes were made to the field being validated. But now, it seems that editing one field may trigger validation for all fields, displaying multiple inline errors for empty or incorrectly filled fields. This behavior is not ideal, and I am seeking a solution to prevent this from happening.

What could be causing this unexpected behavior? and how can it be avoided?

I have configured my form as usual...

Here is an example:

$('.ui.form.inputform')
        .form({
            on: 'change',
            inline:true,
            fields: {
                // Form field rules listed here...
            },


        });
javascriptjquerycsssemantic-ui

Answer №1

For optimal functionality, it is recommended to utilize the "blur" event instead of "change".

I have created a brief demonstration to showcase this concept:

<form>
    <div class="field">
        <label>Field A</label>
        <input name="empty" type="text" placeholder="Enter text here...">
    </div>
    <div class="field">
        <label>Field B</label>
        <input name="empty" type="text" placeholder="Enter more text here...">
    </div>
    <div class="field">
        <label>Dropdown Selection</label>
        <select class="ui dropdown" name="dropdown">
            <option value="">Select</option>
            <option value="choice1">Choice 1</option>
            <option value="choice2">Choice 2</option>
        </select>
    </div>
    <div class="inline field">
        <div class="ui checkbox">
            <input type="checkbox" name="checkbox">
            <label>Checkbox Option</label>
        </div>
    </div>
    <div class="ui submit button">Submit</div>
    <div class="ui error message"></div>
</form>

Contrast with your current JavaScript implementation:

$('form').form({
    on: 'blur',
    fields: {
        empty: {
            identifier: 'empty',
            rules: [{
                type: 'empty',
                prompt: 'Kindly input a value'
            }]
        },
        dropdown: {
            identifier: 'dropdown',
            rules: [{
                type: 'empty',
                prompt: 'Please choose from the dropdown menu'
            }]
        },
        checkbox: {
            identifier: 'checkbox',
            rules: [{
                type: 'checked',
                prompt: 'Remember to check the box'
            }]
        }
    }
});

(Link to demo: http://codepen.io/appsoa/pen/BoxQeL)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is TinyMCE creating unexpected <g> tags?

When I save content in the TinyMCE WYSIWYG editor, I notice that the HTML tag below keeps appearing throughout the text: <g class="gr_ gr_283 gr-alert gr_spell gr_run_anim gr_inline_cards ContextualSpelling ins-del multiReplace" id="283" data-gr-id="28 ...

javascriptjqueryhtmltinymcewysiwyg

Regular expressions won't produce a match if the string is empty

At present, I am employing the regular expression /^[a-zA-Z.+-. ']+$/ to ascertain the validity of incoming strings. If the incoming string is devoid of content or solely comprises whitespace characters, my objective is for the code to generate an er ...

javascriptregexvalidation

Innovative manipulation of arrays using Javascript

Let's say I have some sample input data: data = [ { color : 'Red', number : 5}, { color : 'Blue', number : 3 }, { color : 'Green', age : 8 }, { color : 'Red', number : 7 } ] and I am looking to combine ...

javascriptarraysobjectdynamic

Resizing popups upon button activation

Hey there! I have a popup with a button that reveals random text containing between 0 to 32 words when clicked. The issue is, the popup keeps resizing based on the length of the text, causing the button to move around. Is there a way I can keep the button ...

javascripthtmlcssgoogle-chrome-extension

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

How can I maintain a fixed 40 pixel gap between columns in flexbox without it increasing as the screen width widens? (I apologize for the brevity of this description, but there are no additional details to provide at this time) .browser-box { max-wid ...

htmlcssflexbox

Error: Unexpected termination of data in JSON file on line 2, starting at the first character

I keep encountering an error while trying to execute a basic JSON request. Check out the following PHP code that contains the data: <?php header('Content-Type: application/json; charset=utf-8'); $wealth = array( "name" => &q ...

javascriptphpjson

Error: The options object provided for CSS Loader is not valid and does not match the API schema. Please make sure to provide the correct options when

Summary My Nuxt.js project was created using the command yarn create nuxt-app in SPA mode. However, I encountered an error after installing Storybook where running yarn dev resulted in failure to start the demo page. ERROR Failed to compile with 1 errors ...

javascriptvue.jswebpacknuxt.js

Trouble with Global Variable Allocation in jQuery Ajax

I've got a script that includes a jQuery Ajax call: <script type="text/javascript"> $(document).ready(function() { var timer; $.ajax({ type: 'POST', url: 'closettime.php', success: function( res ) ...

javascriptjqueryajaxjsonjquery-ajaxq

Navigating the world of date pickers: a deceptively easy challenge

Take a look at this fiddle example to get started: http://jsfiddle.net/1ezos4ho/8/ The main goals are: When a date is selected, it should be dynamically added as the input value, like <input type text value="date selected".... Update: <s ...

javascriptjqueryajaxhtml

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

My goal is to utilize the Google Maps API for retrieving coordinates based on an address. In my understanding, using await with the subscribe line should ensure that the code block completes before moving on to the subsequent lines. async getCoordinates ...

javascriptangularasync-awaitangular-observable

Is it secure to store the access token within the NextAuth session?

Utilizing a custom API built with Node.js and Express.js, I have implemented nextAuth to authenticate users in my Next.js application. Upon a successful login, the date is stored in the nextAuth session and can be accessed using the useSession hook. To acc ...

javascriptreactjsnext.jsjwt

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

How do I hide table rows based on dropdown selection? The first table has a dropdown with two options: Current State and Future State. If I select Current State, I want to show or hide specific rows in the 2nd and 3rd tables. I am using IDs for these row ...

javascriptjqueryhtml

Is there a JavaScript method for opening a new window regardless of the PHP file being used?

I have encountered a small dilemma that is causing me frustration. Currently, I have set up a BUTTON on my website. This button, when clicked, triggers a JavaScript function to open a "New Window". The code for this button and function looks like this : ...

javascriptphpfunction

VueJS - Input Image Display Issue Causing Browser Slowdown

I'm experiencing some issues with my VueJS component that includes a file input and displays an image afterwards. Strangely, this is causing my web browsers (both Firefox and Chromium) to freeze up and use massive amounts of CPU. I tried switching to ...

javascriptimagefirefoxvue.jschromium

Guide to verifying if an element contains multiple CSS classes using jQuery

Looking at the HTML structure provided below, the goal is to loop through all elements inside the div with the id "accordionContents." Within this loop, there's a need to check whether the h2 element has both the css classes "acc_trigger" and "active" ...

jquery

Collaboratively accessing a shared constant in two separate JavaScript files

I am diving into the world of JavaScript and Node.js. I am currently experimenting with Puppeteer to extract the text value of a tag and store it in a constant variable. However, I am encountering difficulties when trying to integrate this value into my ...

javascriptnode.jsmocha.jsasync.js

Creating a div that is subtly askew

When it comes to positioning a div 15 pixels off-center horizontally from the page, traditional methods like setting margins to auto or using position:absolute may not work in this situation. The challenge lies in ensuring that the div scales correctly a ...

csshtml

Having trouble with the @keyup event not functioning properly in Vue?

I'm attempting to trigger a method when the enter key is pressed, but for some reason it's not working. Here's the code snippet: <template> <div> <button @click="callEvent" @keyup.enter="callEvent"> Click </button ...

javascriptvue.js

Guide on Minimizing ES6 with Gulp

I am new to creating a gulpfile.js manually for my project based on Backbone and Marionette. My initial gulp file had the following structure: var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserify = require ...

javascriptgulpuglifyjsgulp-uglify

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Looking to achieve a CSS3 linear transition for a "list-style-image" specifically for Firefox? You'll need to include "-moz-" in your code. -moz-transition: list-style-image 0.2s linear; However, the above code is not producing the desired result. I ...

htmlfirefoxcss