如果单击提交按钮时字段未填写信息，则前端输入字段警告消息

Question

我想要的只是在站点的角落弹出一条小消息，说明字段未完成，例如一个小弹出窗口或一个小的 window 我尝试在 JavaScript 中使用警报执行此操作，但它使我的站点变慢非常慢烦人的。

表格需要填写

     <form>
                            <label class="name_label">Your Name</label>
                            <input type="text" id="name" class="name_input" required placeholder="write your name" autocomplete="off">
    
                            <br>
    
                            <label class="number_label">Phone Number</label>
                            <input type="tel" id="phone" class="number_input" required placeholder="Phone" autocomplete="off">
    
    
                            <label class="company_label">Company Website </label>
                            <input type="email" id="email" class="company_input" placeholder="shoesit.com" required autocomplete="off">
    
                            <div class="next-btn ">
                            <button type="submit" value="Continue" id="continue" value="click" onclick="vaildfunction()"> CONTINUE</button>
                            <a  id="nxt" onclick="Next()">Next</a>  
                            </div>
</form>

我正在使用的 JavaScript：

var x=0;
       function vaildfunction(){

         var name=document.getElementById("name").value;
         var phone=  document.getElementById("phone").value;
         var email=  document.getElementById("email").value;

         if(name=="") {
             alert("Please Fill your Form First");
         }
         else if(phone==""){
            alert("Please Fill your Form First");
         }
        else if(email==""){
            alert("Please Fill your Form First");
        }
        else{

            alert("Your form has submitted Sucessfully");
            x=1;
                }
       }      
       function Next(){
       if(x==1){
         window.location = href="thanks.html";
       }       
       else{
        alert("Please Fill your form first before you move on");
       } 
       }

Answer 1

这与 HTML 形式更相关。 例如，当您需要 email 表单用户时，您只需为 email 设置输入类型，然后当用户尝试发送格式错误的 Z0C83F57C786A0B7A39EFAB23731 表单时，他会收到错误。 https://www.the-art-of-web.com/html/html5-form-validation/