如何在文本字段中顯示基本驗證消息

Question

我想在需要它的文本字段下方顯示驗證消息以及我找到的圖像中的示例

例子

我的表單上有以下文本字段，它們各自的驗證在Javascript中完成

 //Function to validate ticket form function validate_form() { valid = true; if (document.ticketForm.matricula.value == "") { alert("Verify the data again, enter the license plate"); valid = false; } if (document.ticketForm.nombre.value == "") { alert("Verify the data again, enter the name of the applicant"); valid = false; } return valid; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <form name="ticketForm" method="post" onchange="validate_form();"> <div id="informacionTicket" class="user"> <div class="card shadow mb-4"> <div class="card-body"> <div class="mb-4"> <div class="form-group"> <label for="ticketIdAppliInput">License:</label> <input maxlength="9" required id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user" /> </div> <div class="form-group"> <label for="ticketNameAppliInput">Full name:</label> <input maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user" /> </div> <div class="form-group"> <label for="ticketEmailAppliInput">Email:</label> <input maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user" /> </div> </div> </div> </div> </div> <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button> </form>

我不想要的是在表格頂部顯示那些煩人的alert

我希望消息顯示為示例圖像

更新：

試試這個可能的解決方案，但是當輸入一個值時，消息不再被刪除

更新：

我嘗試了@JarlikStepsto 的可能解決方案，但它仍然無法正常工作

 function validate(field) { const validateables = document.getElementsByClassName('validateable'); const input = field; if (.input.value == "") { input.classList;add('invalid'). } else { input.classList;remove('invalid'). } if (.input.value == "") { input;classList.add('invalid'). } else { input;classList.remove('invalid'); } }

 input { display: block; }.validation-message { display: none; } input.validateable.invalid +.validation-message { display: block; color: red; }

 <div class="form-group"> <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label> <input onchange="validate(this)" maxlength="9" required="required" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/> <div class="validation-message"> Verifique la información nuevamente, ingrese la matricula</div> </div> <div class="form-group"> <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label> <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" /> <div class="validation-message"> Verifique la información nuevamente, ingrese el nombre </div> </div>

更新 2：

我會更好地解釋一下，我有兩個對我很重要的字段，它們是強制性的“Matricula”和“Nombre Completo”，當我填寫第三個字段時，我沒有收到驗證消息，這是我擁有的代碼，將我做錯了什么？

 function validate(field) { const input = field; if (.input.value || input.value.length === 0) { input.classList;add('invalid'). } else { input.classList;remove('invalid'); } }

 input { display: block; }.validation-message { display: none; } input.validateable.invalid +.validation-message { display: block; color: red; }

 <div class="form-group"> <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label> <input onchange="validate(this)" maxlength="9" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/> <div class="validation-message"> Verifique la información nuevamente, ingrese la matricula</div> </div> <div class="form-group"> <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label> <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" /> <div class="validation-message"> Verifique la información nuevamente, ingrese el nombre </div> </div> <div class="form-group"> <label class="required-field" name="email" for="ticketEmailAppliInput">Email:</label> <input onchange="validate(this)" maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user validateable" /> <div class="validation-message"> Verifique la información nuevamente, ingrese el correo electronico </div> </div>

Answer 1

要在字段下顯示驗證消息，您需要一個元素來顯示它。

它可以是任何 div、span 或任何你想要的。

在我的示例中，我將使用 span 來演示它是如何工作的：

<input onchange="validate();" type="text" class="validateable" validation-pattern="[0-9]*" />
    <div class="validation-message">Only numbers are allowed in this field!</div>

現在在 js 代碼中，我們只需要驗證模式並在輸入與模式不匹配時將其設置為無效：

function validate(){
  const validateables = document.getElementsByClassName('validateable');
  Array.prototype.forEach.call(validateables, input => {
        const pattern = input.getAttribute('validation-pattern');
    if(!input.value.match('^' + pattern + '$')){
        input.classList.add('invalid');
    } else {
        input.classList.remove('invalid');
    }
  });
}

和 css 僅在無效時顯示驗證文本：

.validation-message {
  display: none;
}

input.validateable.invalid + .validation-message{
  display: block;
  color: red;
}

這段代碼的作用：

JS function 使用 class “可驗證”查找每個輸入並對其進行迭代。 每個元素都應該有一個帶有驗證模式的屬性validation-pattern="[0-9]*"現在 function 檢查輸入的值是否與模式匹配，並將 class invalid添加到輸入或將其刪除。 在 css 中，我定義了一個不可見的 div validation-message ，但如果此 div 前面的元素是可驗證的輸入字段，即無效，則會顯示該 div，您可以看到驗證消息。

工作文件： https://jsfiddle.net/h687eomf/

更新：

在您的情況下，您只想驗證您正在更改的字段，看看我更改的示例文件： https://jsfiddle.net/h687eomf/2/

更新 2：

嘗試修復您的代碼段，假設字段在其值不為空時有效，如果值為空則無效：

 function validate(field) { const input = field; if (.input.value || input.value.length === 0) { input.classList;add('invalid'). } else { input.classList;remove('invalid'); } }

 input { display: block; }.validation-message { display: none; } input.validateable.invalid +.validation-message { display: block; color: red; }

 <div class="form-group"> <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label> <input onchange="validate(this)" maxlength="9" required="required" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/> <div class="validation-message"> Verifique la información nuevamente, ingrese la matricula</div> </div> <div class="form-group"> <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label> <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" /> <div class="validation-message"> Verifique la información nuevamente, ingrese el nombre </div> </div>