Displaying an error message within the input field

I recently incorporated the jQuery validate plugin to check a contact form I created, but I'm encountering an issue. My goal is to have the error class display inline with the input field where the error occurred. However, it is only appearing in block format. I understand this is due to the display: block !important; in my input class, but removing it causes the blocks to move inline whenever there is an error.

Does anyone have suggestions on how I can fix this?

Please refer to the comments for a link to a jsfiddle since I couldn't figure out how to embed an external source in the snippet.

<form id="contactform" method="post" action="" novalidate>
  <input class="contact_input" type="text" name="name" placeholder="Name">
  <input class="contact_input" type="email" name="email" placeholder="Email">
  <textarea class="contact_input" name="message" placeholder="Message"></textarea>
  <input type="submit" name="submitform" value="Send">
</form>

CSS

.contact_input {
  display: block !important;
  margin-bottom: 15px;
  width: 300px;
}
.error {
  color: red;
  display: inline;
  padding-left: 20px;
}
javascriptjqueryhtmlcss

Answer №1

https://i.sstatic.net/Gfnw2.png

I have found a CSS solution that I believe will work: 

    .contact_input {
      display: block !important;
      margin-bottom: 15px;
      width: 300px;
    }
    .error {
      color: red;
      float: left;
      margin-left: 10px;
    }
    .clear {
      clear: both;
      padding: 10px;
      display: block;
    }

Please test it and confirm if it works for your requirements as well.

UPDATE: I made some adjustments to the code, please check if this updated version works: https://jsfiddle.net/wgtLnxfw/6/ There have been modifications to both markup and css.

Answer №2

To implement the desired design, you can utilize the following markup and CSS styles. For a demonstration, refer to this Fiddle.

<form id="contactform" method="post" action="" novalidate>
    <div>
      <input type="text" name="name" placeholder="Name">
    </div>
    <div>
      <input type="email" name="email" placeholder="Email">
    </div>
    <div>
      <textarea name="message" placeholder="Message"></textarea>
    </div>
    <div>
      <input type="submit" name="submitform" value="Send">
    </div>
</form>


#contactform input[type="text"], input[type="email"], textarea {
  margin-bottom: 15px;
  width: 300px;
  float: left;
}

#contactform div {
  overflow: auto
}

.error {
  color: red;
  display: block;
}

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

switch the visibility of the p tag based on its content

It seems like solving this shouldn't be too challenging, but I'm still learning when it comes to Javascript or JQuery. HTML: <p><span id="AddLine1Summary"></span>,</p> <p><span id="AddLine2Summary"></span& ...

javascriptjqueryhtmlcss

Struggling to retrieve data from AJAX call

I'm having trouble accessing the data returned from a GET AJAX call. The call is successfully retrieving the data, but I am unable to store it in a variable and use it. Although I understand that AJAX calls are asynchronous, I have experimented with ...

javascriptjqueryajax

The persistent issue with JavaScript variables constantly resetting to zero is causing frustration

Currently, I am developing a small tile matching game where the variable "bestTime" saves the time taken to complete each session. The value of "bestTime" is then displayed as text using the variable "bestTimeTxt." Once a session is completed, a link will ...

javascripthtmldreamweavereaseljs

Integrating a PHP function within an ECHO statement

Here is a code snippet I'm currently using in my Wordpress: function wpstudio_doctype() { $content = '<!DOCTYPE html>' . "\n"; $content .= '<html ' . language_attributes() . '>'; echo apply_filte ...

phphtmlwordpress

If you refer to a function, are you personally calling the function or asking the reference to call it?

From what I understand, and please correct me if I'm mistaken, when a variable is assigned to a function in the form of a function expression, it doesn't hold the function in the same way that it holds a primitive value. The variable simply refer ...

javascript

What is the process for generating an HTML document from start to finish with the 'html-element' node module?

Here is an example that demonstrates a flawed method: const HTML = require('html-element'); const doc = `<body> </body>`; const page = HTML.document.createElement(doc) page.appendChild('<div>1</div>') page.append ...

javascript

One required positional argument is needed in `update_one()`: 'update' is missing

I've exhausted all possible options, but I can't seem to make it work. Any suggestions on how I can get this code to function properly? I attempted using ajax_data to update the values, but it was unsuccessful. The main goal of this code is to al ...

javascriptpythonajaxmongodb

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

sticky placement changes when option is chosen

I'm experimenting with the CSS style called position: sticky and I've encountered an issue. Everything works perfectly until the select element is activated, causing the page to scroll back to the original position of the sticky element. <div ...

csspositionsticky

Experiencing some unusual shadows in my Three.js project while attempting to add a simple shadow effect to a cube or group of cubes

Trying my hand at implementing shadows in Three.js, even though I am fairly new to JavaScript. My attempts to create a cube with a proper shadow have yielded partial results, as only a portion of the mesh seems to be casting the shadow. https://i.sstatic. ...

javascriptthree.jsshadow

Sending personalized list attributes through JSON to JavaScript in ASP.NET

Below is a custom list I created for pagination of my results: public class PagedList<T> : List<T> { public int PageIndex { get; set; } public bool HasNextPage { get; set; } // ... } I aim to pass this list via JSON to the View: ...

javascriptjqueryasp.net-mvcjson

Tips for preventing window.location from becoming relative to the file

Despite my best efforts, I couldn't figure out why this issue was occurring or how to resolve it. Here is the code in question: window.location.href=("www.google.com"); The intended functionality of this code is to redirect to google.com, but inst ...

javascripthtmlwindow.location

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

jqueryhtmlcssmousehover

Dealing with array in JQuery and connecting it to PHP/MySQL

I am having trouble with the code below, where I am attempting to split an array into blocks of 7 values. However, it seems like this code is not functioning at all. I have checked the PHP documentation on array_chunk() but still can't figure out what ...

phpjqueryarrays

Obtain the URL link from Unsplash where the picture is sourced

As I work on a website, I incorporate a link () to display a random photo. However, the photo refreshes periodically and upon loading the site, all that is visible is this default link: . Is there a method to extract the actual source like so: "". Althou ...

javascripthtmlcss

What is the best way to verify multiple email addresses simultaneously?

Is there a method to validate multiple email addresses entered by users in a textarea? My current approach involves using ng-pattern for validation. ...

javascriptangularjs

Utilize anychart.js to define the axis using JSON data

I'm relatively new to using anychart js and encountering some obstacles. I have a json file that is being fetched from an API, containing data on NBA players' statistics. You can find the json file here: My goal is to display the date data on th ...

javascriptjsonchartsanychart

What can I do to adjust the position of the div wrapper if the floating sidebar is taller than

Check out this example http://jsfiddle.net/NuzDj/ When you resize the window, the sidebar overlaps with the wrapper and footer. Is there a way to automatically adjust the height of the wrapper when the sidebar overlaps with it? ...

jqueryhtmlcss

Transferring a Query between Domains with the Help of JavaScript

It is necessary to develop a function that generates a query based on the user's input of "Test" in an INPUT on Site A (SiteA.com) and then redirects to Site B within the same window, passing along the query (SiteB.com/search.aspx?k=test). Code snipp ...

javascript

Disabling the background shadow effect in Angular Material's Accordion

I successfully disabled the background shadow on the Angular Material Accordion in this demonstration by incorporating the following CSS rule: .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none !important; /* box-shadow: ...

cssangularsassangular-material