How to discover a CSS Selector name?

jPaulB · Sep 12, 2023

Hi Everybody,

I'm using the "required" argument within each of several inputs on my form.
When the form is submitted, an empty input will display a message like this,
and then sorta pause so that a visitor can reply properly. Then the visitor is
expected to fill the field and press the submit <button> again.

If I want to modify that that PopUp, (CSS: ????? { border-color: #FF0000} I need to know the CSS Selector name.

Is there a way for me to discover what the CSS Selector name is, that my browser is following?
Is there a way for me to read the details a browser is going to follow, once a CSS Selector name is known?

BigDady · Sep 12, 2023

Just add the attribute 'required' to the form field and the form will not submit.
From w3schools:

Code:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

Here are the sectors for css: https://www.w3schools.com/cssref/css_selectors.php

You should study code at this site!!!

jPaulB · Sep 12, 2023

I get what you mean, BigDady. What I'm trying to do is modify how that PopoUp message appears, but to do that I need to know what the selector name is.

Saul H. · Sep 12, 2023

To achieve interaction on a precise button, simply use onClick!

VBService · Sep 12, 2023

If you want to customize the appearance of the message or pop-up that appears when you try to submit a form with an empty required field, this is not available for styling using regular CSS style sheets. The appearance of this message is controlled by the web browser and is part of its default behavior related to form validation.

jPaulB · Sep 12, 2023

Thank you VBService , once again.

Headache Resolved!

VBService · Sep 13, 2023

but ... check this
[ on-line ]

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      input {
        display: block;
        margin: .5rem 0;
      }
      input[data-required] {
        background-color: yellow;
      }
      .custom-validation-message {
        display: none;
        width: 50%;
        background-color: red;
        color: white;
        padding: 1rem;
        border-radius: .25rem;
      }
      button {
        margin-top: 1rem;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text">

      <input type="text" data-required>
      <div class="custom-validation-message">
        This field is required.
      </div>

      <input type="text" data-required>
      <div class="custom-validation-message">
        This field is required.
      </div>

      <input type="text">

      <button type="submit">Submit</button>
    </form>

    <script>
      const form = document.querySelector('form');

      form.addEventListener('submit', function(e) {
        let required = 0;
        for (const element of form)
          if (element.matches('input[data-required]'))
            if (!element.value.trim()) {
              element.nextElementSibling.style.display = 'block';
              required++;
            } else
              element.nextElementSibling.style.display = '';
           
        if (required > 0 ) e.preventDefault();
      });
    </script>
  </body>
</html>

jPaulB · Sep 13, 2023

VBService said:

but ... check this
[ on-line ]

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      input {
        display: block;
        margin: .5rem 0;
      }
      input[data-required] {
        background-color: yellow;
      }
      .custom-validation-message {
        display: none;
        width: 50%;
        background-color: red;
        color: white;
        padding: 1rem;
        border-radius: .25rem;
      }
      button {
        margin-top: 1rem;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text">

      <input type="text" data-required>
      <div class="custom-validation-message">
        This field is required.
      </div>

      <input type="text" data-required>
      <div class="custom-validation-message">
        This field is required.
      </div>

      <input type="text">

      <button type="submit">Submit</button>
    </form>

    <script>
      const form = document.querySelector('form');

      form.addEventListener('submit', function(e) {
        let required = 0;
        for (const element of form)
          if (element.matches('input[data-required]'))
            if (!element.value.trim()) {
              element.nextElementSibling.style.display = 'block';
              required++;
            } else
              element.nextElementSibling.style.display = '';
          
        if (required > 0 ) e.preventDefault();
      });
    </script>
  </body>
</html>

I like that, VBService. I've read the lines and studied the code but the "document.xxxx('??')" kinda stuff is brand new to me. It looks worthy of more study. Is this a JavaScript script or XML script?

VBService · Sep 13, 2023

jPaulB said:
It looks worthy of more study

then check this: HTML DOM Elements

jPaulB said:
Is this a JavaScript script or XML script?

actually ... no, this is to xml script,

but, ... you can operate on XML using JavaScript. JavaScript provides various ways to work with XML data, and two commonly used methods are:

DOM (Document Object Model): JavaScript can manipulate XML documents using the DOM API. You can load an XML document into a DOM tree and then traverse and manipulate the XML elements using JavaScript. Here's a basic example of how you can work with XML using DOM:

JavaScript:

// Create a new XMLHttpRequest object to load the XML datavar xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        // Load the XML data
        var xmlDoc = xhttp.responseXML;

        // Access XML elements and attributes
        var title = xmlDoc.getElementsByTagName("title")[0].textContent;
        var author = xmlDoc.getElementsByTagName("author")[0].textContent;

        // Manipulate XML data as needed
        console.log("Title: " + title);
        console.log("Author: " + author);
    }
};

// Open and send the request to load the XML file
xhttp.open("GET", "example.xml", true);
xhttp.send();

XPath: XPath is a language for navigating XML documents. You can use JavaScript libraries like xpath or built-in browser XPath support to query XML data using XPath expressions:

JavaScript:

// Load the XML data as a string
var xmlString = '<bookstore><book><title>Book 1</title><author>Author 1</author></book></bookstore>';
var xmlDoc = new DOMParser().parseFromString(xmlString, "text/xml");

// Use XPath to query XML data
var title = xmlDoc.evaluate("/bookstore/book/title", xmlDoc, null, XPathResult.STRING_TYPE, null).stringValue;
var author = xmlDoc.evaluate("/bookstore/book/author", xmlDoc, null, XPathResult.STRING_TYPE, null).stringValue;

console.log("Title: " + title);
console.log("Author: " + author);

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Positioning CSS components	1	Nov 16, 2023
CSS basic issue	2	May 9, 2023
<Button ...> display is fine, except for two things	1	Oct 23, 2023
How can I arrange a series of radio buttons?	2	Jan 25, 2024
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Can I modify the tooltip display on an <input type="xx"> statement?	2	Oct 22, 2023
Interfering CSS	1	Feb 9, 2024

How to discover a CSS Selector name?

jPaulB

BigDady

jPaulB

Saul H.

VBService

jPaulB

VBService

jPaulB

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads