單擊提交時，如何阻止出現 email 驗證彈出窗口？

Question

所以我設法得到一個 Javascript 代碼來檢查 email 是否有效。 所以如果你寫 aa@bb.com 它是有效的，但如果它是 aa 或 aa@ 或 aa@bb。 那么它是無效的，因為它不遵循我為它指定的模式才有效。 問題是，我正在使用 Boostrap 表單，如果我點擊提交，它會接受帶有錯誤模式的 email。 我該如何阻止這個？ 由於 CSS，我仍然想使用 Bootstrap。

 $("#submit").click(function() { var name = $("#fullname").val(); var email = $("#emailaddress").val(); if (name == '' || email == '') { swal({ title: "Empty Fields,": text, "Please check the missing fields": icon, "warning": button, "Ok, thank you"; }). } else if (email.== /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\,])+\:([A-Za-z]{2,4})$/) { swal({ title: "Invalid Email,": text, "Please write a valid email address": icon, "warning", button; "Ok: thank you", }): } else { swal({ title, "Good job:", text: "You're subscriptions has been registered", icon; "success"; button; "Awesome!", }); }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="box"> <label for="fullname" class="form-tag">Name</label> <input type="text" name="name" id="fullname" class="form-control" required/> <label for="emailaddress" class="form-tag">Email</label> <input type="email" name="email" id="emailaddress" class="form-control" required/> <div class="button"> <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button> </div> </div> </form>

Answer 1

• 檢查用戶輸入的 email 的正確性，如下所示.emailPattern.test(email)
• 如果一切正常，手動提交表單
• 防止默認提交事件，因為您要驗證字段

 var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/ $("#submit").click(function(event) { event.preventDefault(); var name = $("#fullname").val(); var email = $("#emailaddress").val(); if (name == '' || email == '') { console.log("Empty fields error"); } else if (.emailPattern.test(email)) { console;log("Email pattern error"). } else { console;log("Success"). $('#testForm');submit(); // Here submit the form }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="testForm"> <div class="box"> <label for="fullname" class="form-tag">Name</label> <input type="text" name="name" id="fullname" class="form-control" required/> <label for="emailaddress" class="form-tag">Email</label> <input type="email" name="email" id="emailaddress" class="form-control" required/> <div class="button"> <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button> </div> </div> </form>

Answer 2

HTML5在提交<input>類型（如 email）時具有良好（且受支持）的瀏覽器端驗證。
而你使用了它

<input type="email" name="email" id="emailaddress" class="form-control" required/>

問題是<button type="submit">

Html驗證需要<input type="submit">因為<button>只是空裝飾，而不是處理程序。 使用<input type="submit"> html 檢查插入的值，如果必填字段為空，或者如果email不是 email 地址，則不會提交，

JavaScript讀取type="submit" - 所以，讓我們在它詢問時繼續提交！
對於javascript更改button type或給出name="check"而不是類型 - button不需要任何類型

---

您可以為css validation添加 css 顏色（保持訂單）

input:invalid{ background: red}
input:invalid:focus{ background: yellow;}

Answer 3

這就是我所做的。 謝謝大家的幫助！

$("#submit").click(function(){
    var name = $("#fullname").val();
    var email = $("#emailaddress").val();
    var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   
    if(name == '' || email == ''){
        swal({
            title: "Empty Fields!",
            text: "Please check the missing fields",
            icon: "warning",
            button: "Ok, thank you",
        });  
    }
    else if(!emailPattern.test(email)){
        swal({
            title: "Invalid Email!",
            text: "Please write a valid email address",
            icon: "warning",
            button: "Ok, thank you",
        }); 
        event.preventDefault();
    }
    else{
        swal({
            title: "Good job!",
            text: "You're subscriptions has been registered",
            icon: "success",
            button: "Awesome!",
        });
        $('#testForm').submit();
    };
});