I went over the codes numerous times. I tried adding in and then removing the extra slash in the link tags.
What's up with this error message? Isn't my close tag correct?
<!-- Your code here -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Site Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Error message:
index.html
valid html
has a valid HTML structure:
AssertionError: invalid HTML:
Expected omitted end tag <link> instead of self-closing element <link/>
Trailing whitespace
: expected false to be true
expected - actual
-false
+true
at Context.<anonymous> (test/indexTest.js:103:73)
at process.processImmediate (node:internal/timers:483:21)
How do I write error messages in HTML5?
Which is more "semantic HTML" for error messages? - Stack Overflow
forms - How to show error message around HTML input on blur without jarring the layout? - User Experience Stack Exchange
how to show an error message beside field in html using javascript please help me - Stack Overflow
Videos
I believe you should use a <label> which directly associates the error message with the input element.
quoting the W3 specs
The LABEL element may be used to attach information to controls.
and
More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
See also Error Message: <span> vs <label>
WCAG2.0 guidelines, on
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Lists as sufficient techniques.
G138: Using semantic markup whenever color cues are used
And
H49: Using semantic markup to mark emphasized or special text
Based on those, I infer that the only appropriate tags for errors are <em> and <strong>
Using <label> in not enough as it shows relationship between the label content and the target field, but doesn't communicate the importance of the content.
You are assuming that it's a problem (jarring) that the validation error message shifts the form vertically. The real question to me is: how does this affect the user in a negative sense? Does it break the user flow? Do they get lost due to it?
I think it's way less of a problem than you might assume. I even tend to think it's a non-issue with a slight benefit of the user noticing the change of content. (Which adds to discoverability). Of course, one can find it ascetically less pleasing, but that's a whole different issue.
You also ask:
Also wondering how this would best work on mobile / small portrait devices.
I think pushing the content down vertically is the correct way to go about it. There is no harm in a vertical shift in my opinion.
You should put the label inside the field and have the input replace the label text. It's a better design and it solves the resizing issue.
Material design does this. Here's an example of error messages from their site:
material design > components > text fields
you have not given the id to you textbox also pass the value of textbox into the function
like this
<input type="text" name="firstname" id="firstname" onblur="check(this.value)"/>
And JS Function
function check(value)
{
if(value.trim()=="")
{
document.getElementById('errorname').innerHTML="this is an invalid name";
}
}
SEE FIDDLE DEMO
You are not provided ID for your input field. Add an ID and access your input field.
function check(){
if(document.getElementById('firstname').value==""){
document.getElementById('errorname').innerHTML ="this is an invalid name";
}
}
And change your html field like this.
<input type="text" name="firstname" id="firstname" onblur="check()"/>
While an alert message cannot be produced without JavaScript, you could take advantage of HTML5's placeholder attribute to inform the user of this message:
<input type="text" placeholder="You must enter something in this field"! name="whatever" id="whatever" />
And couple this with JavaScript:
var inputElem = document.getElementById('whatever');
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
if (inputElem.value = '' || inputElem.value.length < 1){
alert('You must enter some actual information');
return false;
}
};
However JavaScript can be edited by the users, via Firebug, Web Inspector, Dragonfly...or by simply creating a new html file and submitting the form to the same source from the action attribute of the form element. Therefore your form-handling script must be sanitised and checked on the server as well as the client; client-side checking is a convenience to the user (to prevent unnecessary page-reloads, submissions and so on), it is not a security feature, and should not be used, or mistaken, as such.
Best way is using Ajax if you want to do it at the same page. You need to read some tutorials on it. It's not that easy to explian here.
If reloading or redirecting to other page is ok for you, you should compare the submitted form value with the values in the database in a PHP script which is redirected from form submission (action url). If values doesn't match and not empty, store the values to database and redirect to a page like the list of companies or "company successfully created" message page. If values match with an old record or empty, redirect back to the same form page with a flag (something like form.php?error=1 etc.) and show the proper error message.
Also you can use JavaScript for immediate alerts. But you should always do the same checks at PHP side since JavaScript can be disabled in browsers.