如何在 html 表单中的所有空白和必填字段显示“请填写此字段”？

Question

I have a form as shown in the fiddle https://jsfiddle.net/vrn7zx5h/3/ in which I want to show the warning sign "Please fill out this field" at the same time for all unfilled required fields.

I found the answer on SO (as shown below) but i am not sure how to integrate with the fiddle.

function checkName(val){
        if(/^[^-\s][\w\s]+$/.test(val)){
            return true;
        }else{
            if(val.length != 0){
                return false;
            }
        }
    }

Problem Statement:

I am wondering what changes I should make in the fiddle so that the above pasted SO answer works with the fiddle.

Answer 1

Here is a JS fiddle that will show all error at one time. It is just barebone and not fancy. You'll need to make it fancy on your own. I also disabled the built-in validator as well with novalidate in the form tag. https://jsfiddle.net/6kxc9hmq/1/ FYI: I also did not put in the functionality to hide the error message on next run, if the input now satisfies the condition.

Basically, I attached a submit event handler to the form and if the validator returned false, I told the form to not submit. Works only on IE9+ (I think) all the other browsers are usually fine with this method. The validator is basically just checking if the value of the input met the condition that I specified.

document.getElementById('form').addEventListener('submit', function(e) {
if(!validate())
    e.preventDefault();
});

Answer 2

I think it should look like this, if I understand what you mean

<form action="">
    Username: <input type="text" name="usrname">
    Password: <input type="password" name="Password">
    <input type="submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not
supported in Internet Explorer 9 and earlier versions.</p>
<script>
    // append the listeners
    document.forms[0].addEventListener('submit', function(evt){
        if([
            checkName(this.querySelector('[name="usrname"')),
            checkName(this.querySelector('[name="Password"'))
        ].some((v)=>v)) {
            evt.preventDefault()
        }
    })

    // check is empty, then notify
    function checkName(element){
        // if you just have to check if is empty, this is enough
        if(element.value) {
            return
        }
        notify(element)
        return true
    }

    // print the message
    function notify(element) {
        if(element.nextElementSibling.classList.contains('notify')) {
            return;
        }
        element.parentNode.insertBefore(
            Object.assign(document.createElement('p'),
            {
                className: 'notify',
                innerHTML: 'Please fill out this field for all empty and required fields'
            }
        ), element.nextSibling)
    }
</script>

Answer 3

In your form, add empty divs after each input element. And you can conditionally display messages in the div in your validation. Eg if(name ==' '){div.innerHTML = 'please enter your name'}

Answer 4

The required Attribute Add the required attribute to your form.

The required attribute tells the browser to only submit the form if the field in question is filled out. Obviously, this means that the field can't be left empty, but it also means that, depending on other attributes or the field's type, only certain types of values will be accepted.