Combine the input fields to enable Livevalidation

When validating several input fields using Livevalidation to check if they are not empty, the code I use is as follows:

        <script type="text/javascript>
            var street = new LiveValidation('street');
            var streetnumber = new LiveValidation('streetnumber');
            street.add( Validate.Presence );
            streetnumber.add( Validate.Presence );
        </script> 

Both input fields are inline. However, the message will always be displayed directly behind the input field. This causes the message from the first input field to reposition the second field.

I am exploring the most effective way to combine the validation of both fields and display only one message.

You can view the current result here: http://jsfiddle.net/Vme7C/

Answer №1

http://jsfiddle.net/Xp8JK/2/

var avenue = new LiveValidation('avenue',{
    onValid:showmessage(true),onInvalid:showmessage(false)
});
var avenuenumber = new LiveValidation('avenuenumber',{
    onValid:showmessage(true),onInvalid:showmessage(false)
});

var avenuevalid=false,avenuenumbervalid=false,
    ls=document.getElementById('msgli');
function showmessage(val){
    return function(){
        if(this.element.id=="avenue")
            avenuevalid=val;
        else
            avenuenumbervalid=val;
        if(avenuevalid && avenuenumbervalid){
            ls.innerHTML="All fields are valid";
            return;
        }
        if(!avenuevalid && !avenuenumbervalid){
            ls.innerHTML="No field is valid";
            return;
        }
        ls.innerHTML=(!avenuevalid?"Avenue":"Avenue number")
            +" field is invalid";
        return;
    }
}

avenue.add(Validate.Presence);
avenuenumber.add(Validate.Presence);

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

System for Node.js execution replay logging

Running a straightforward script that performs various tasks can be tedious when trying to debug errors. The log messages scattered throughout the code clutter the file, requiring more and more console.log entries for detailed information. Instead of fill ...

Adapting to more user inputs in accordance with the feedback received from the AJAX response

Two user inputs are being received: area time Utilizing this information, the available restaurants in the specified area during that particular time are displayed. In addition, all the cuisines offered by these restaurants are displayed as checkboxes. ...

Using JavaScript to change the date format of an RSS feed to Dutch format

I extracted this date from the RSS feed: "2014-02-28T20:00:00+0100" Is there a way to format it as: 28 February 2014 - 20:00? Looking for assistance on this formatting task! ...

Ensuring the accuracy of query parameters in REST api calls using node.js

Each object type in the GET request to the API has a set of valid query parameters. var queryFields = { 'organisation': ['limit', 'page', 'id', 'search'], 'actor': ['limit', 'p ...

Eliminating the standard borders on a pop-up window

When I utilize window.open to open a POPUP Window, the default title blue color borders appear rounded around the window as shown in the image here. Is there a way to remove these borders using CSS or any other option without having to use Light box? ...

Internet Explorer encounters errors when processing LESS code

Currently experimenting with the combination of LESS and respond.js to facilitate the development of a new website. Both LESS and respond are incredibly useful tools. However, encountered several issues with LESS in Internet Explorer. Initially, while in ...

Issue encountered with edges helper and a partly opaque object rendering

My goal is to create a realistic earth using three.js, similar to this example, which is an improvement from this one. However, I am facing an issue where the rendering order of the sky, earth, and atmosphere is not being properly interpreted by the render ...

Tips for utilizing data from one JavaScript file in another JavaScript file

In my current setup, I have two JavaScript files - a.js and b.js. The input data is stored in a.js, while the unit tests are written in b.js. Now, the challenge I am facing is how to access the input data from a.js in b.js. I understand that both files can ...

Angular throws an error when trying to parse undefined data outside of an async function

I'm having trouble parsing data retrieved from an http call and passing it to ngOnInit. Can you assist me in finding a solution? My project is built with Angular 4. Here's the async function: async getAsyncData() { this.asyncResult = awai ...

Why does this asynchronous function initially return nothing, only to suddenly return all results on subsequent tries?

My current task involves inserting data into my database within a map loop. To ensure that the loop completes before proceeding, I am utilizing an async function to store all results in the variable "practicasAgregadas." This is how I invoke the function: ...

Leveraging various routes to access data with a shared VueJS 3 component

Could you please review this code snippet: It displays two routes that utilize the same component to fetch content from an API. Main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/route1& ...

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

What is the process of extracting a value from an array of objects based on another parameter?

Given the array below which contains objects with nested arrays, my goal is to retrieve the value 'AUS Eastern Standard Time' when 'Australia/Melbourne' is passed to the array. Although I attempted to use the code var winTimeZone = arr ...

Issue with updating a select tag using ajax in Internet Explorer

I encountered an issue with the inner HTML function while updating option tags in a select tag. When I select a country in the first select tag, the AJAX code should update the cities in the other select tag. The code works fine in all major browsers excep ...

React: Modifying values of individual input fields

Utilizing React, I have developed a basic list that showcases data fetched from an API. The fetching and updating of data is done through axios. An issue arises when updating a specific element in the list, causing all inputs to clear except for the acti ...

jquery plugin causing issues with bootstrap button functionality

Currently, I am utilizing the jQuery form plug-in to post my form in an Ajax way. The post function is functioning perfectly with the default button. However, it seems to encounter issues when I try to use a custom Bootstrap button as shown below. Could so ...

What is the reason that the ES6 module import expression fails to import JSON files located in the assets folder when using certain path arguments?

A puzzling ES6 import scenario came up where the following import statement did not function as expected within methods of a Vue.js SFC: const fullContentFile = '@/assets/rules/rules.json' import(fullContentFile).then(data => console.log(&apos ...

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

Promise rejection not handled: Trying to modify headers after they have already been sent to the client

I can't seem to figure out why these errors keep popping up. I've tried looking for solutions online but haven't had any luck. Here is the node function I'm using for an API call: exports.GetEmployeeConfirmationList = function (req, res ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...