首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如果单击提交按钮时字段未填充信息,则会显示前端输入字段警告消息

如果单击提交按钮时字段未填充信息,则会显示前端输入字段警告消息
EN

Stack Overflow用户
提问于 2021-01-03 04:44:27
回答 1查看 172关注 0票数 0

我想要的是在网站的角落里弹出一条小消息,告诉我字段没有完成,就像一个小的弹出式窗口或一个小窗口我试着在JavaScript中使用alert来做这件事,但它使我的网站变得非常慢,这是一种恼人的做法。

表单需要填写

代码语言: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:

代码语言: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");
       } 
       }
EN

回答 1

Stack Overflow用户

发布于 2021-01-03 04:48:41

这更多地与HTML表单相关。例如,当你想要求一个电子邮件表单用户时,你所需要做的就是为电子邮件设置一个输入类型,然后当一个用户试图发送一个格式错误的电子邮件表单时,他就会得到一个错误。https://www.the-art-of-web.com/html/html5-form-validation/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65543910

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档