验证表单不起作用 - 表单和验证

Question

$(function(){
    $("#submit").click(function(){
        var first_name = $("#first_name").val();
        var last_name = $("#last_name").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var ans = true;
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if(first_name === ""){
            window.alert("لا يمكنك ترك خانةالاسم فارغة");
            $("#first_name").addClass("WrongInp");
            ans = false;
        }else{
            $("#first_name").removeClass("WrongInp");
        }
        if(last_name === ""){
            window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
            $("#last_name").addClass("WrongInp");
            ans = false;
        }else{
            $("#last_name").removeClass("WrongInp");
        }
        if(phone.value === ""){
            window.alert("لا يمكنك ترك خانةالهاتف فارغة");
            $("#phone").addClass("WrongInp");
            ans = false;
        }else{
            $("#phone").removeClass("WrongInp");
        }
        if(phone.length < 9 || phone.length > 14){
            window.alert("ادخل رقم هاتف صحيح");
            $("#phone").addClass("WrongInp");
            ans = false;
        }else{
            $("#phone").removeClass("WrongInp");
        }
        if (email === '') {
           alert('الرجاء ادخال البريد الالكتروني');
           return false;
            }
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
           alert("البريد الالكتروني غير صحيح");
           return false;
            }
        if(ans === true){   
            var url = 'Cant Reveal';
            var form = new FormData();
            form.append("first_name", $('#first_name').val());
            form.append("last_name", $('#last_name').val());
            form.append("phone", $('#phone').val());
            form.append("email", $('#email').val());
            form.append("status", "new");
        
            var settings = {
              "url": "cant Reveal",
              "method": "POST",
              "timeout": 0,
              "headers": {
                "Authorization": "Cant Reveal"
              },
              "processData": false,
              "mimeType": "multipart/form-data",
              "contentType": false,
              "data": form
            };
        
            $.ajax(settings).done(function (response) {
              window.location.href = "www.google.com";
            });

        }
    
        return false;
    });
});

<form id="myForm">
              <input name="first_name" id="first_name" class="input" type="text" placeholder="الاسم الكامل" required />
              <input name="phone" id="phone" minlength="8" maxlength="15" class="input" type="text" placeholder="الجوال" required />
              <input name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" class="input" type="text" placeholder="البريد الالكتروني" required />
            <button type="text" class="submit">submit</button>
            <input type="hidden" name="last_name" id="last_name" value="LN">
        </form>

我的代码有什么问题我在 javascript 部分更改了一些内容，但无法让它再次工作！

我认为我在 javascript 中进行了更改， 首先我验证表格，然后用 ans 提交 ans 必须为真 如果其中一个字段为空或电话和电子邮件与我的验证不匹配，如果变为 false 并且不继续

在 javascript 部分中提出的任何建议 或者我可以删除这个部分并写另一个更好的......

Answer 1

click 处理程序不起作用，因为您将其绑定到 ID 为 submit - $("#submit") 的 HTML 元素。

在提供的 HTML 中，您使用的是 submit 类，而不是 id。

<button type="text" class="submit">submit</button>

要使处理程序工作更改此行：

$("#submit").click(function(){

到这个

$(".submit").click(function(){

---

另一种选择是在 HTML 中使用 id 而不是 class

<button type="text" id="submit">submit</button>

---

在 javascript 部分中提出的任何建议，或者我可以删除此部分并编写另一个更好的部分......

如果你是初学者，完全没问题。如果你想让它更简洁（因为你使用的是 jQuery），我建议你看看这个插件，比如 - jquery-validation

Answer 2

试一试。

$(document).ready(function(){
    $("#submit").click(function(){
        var first_name = $("#first_name").val();
        var last_name = $("#last_name").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var ans = true;
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if(first_name === ""){
            window.alert("لا يمكنك ترك خانةالاسم فارغة");
            $("#first_name").addClass("WrongInp");
            ans = false;
        }else{
            $("#first_name").removeClass("WrongInp");
        }
        if(last_name === ""){
            window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
            $("#last_name").addClass("WrongInp");
            ans = false;
        }else{
            $("#last_name").removeClass("WrongInp");
        }
        if(phone.value === ""){
            window.alert("لا يمكنك ترك خانةالهاتف فارغة");
            $("#phone").addClass("WrongInp");
            ans = false;
        }else{
            $("#phone").removeClass("WrongInp");
        }
        if(phone.length < 9 || phone.length > 14){
            window.alert("ادخل رقم هاتف صحيح");
            $("#phone").addClass("WrongInp");
            ans = false;
        }else{
            $("#phone").removeClass("WrongInp");
        }
        if (email === '') {
           alert('الرجاء ادخال البريد الالكتروني');
           return false;
            }
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
           alert("البريد الالكتروني غير صحيح");
           return false;
            }
        if(ans === true){   
            var url = 'Cant Reveal';
            var form = new FormData();
            form.append("first_name", $('#first_name').val());
            form.append("last_name", $('#last_name').val());
            form.append("phone", $('#phone').val());
            form.append("email", $('#email').val());
            form.append("status", "new");
        
            var settings = {
              "url": "cant Reveal",
              "method": "POST",
              "timeout": 0,
              "headers": {
                "Authorization": "Cant Reveal"
              },
              "processData": false,
              "mimeType": "multipart/form-data",
              "contentType": false,
              "data": form
            };
        
            $.ajax(settings).done(function (response) {
              window.location.href = "www.google.com";
            });

        }
    
        return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
              <input name="first_name" id="first_name" class="input" type="text" placeholder="الاسم الكامل" required />
              <input name="phone" id="phone" minlength="8" maxlength="15" class="input" type="text" placeholder="الجوال" required />
              <input name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" class="input" type="text" placeholder="البريد الالكتروني" required />
            <button type="text" class="submit">submit</button>
            <input type="hidden" name="last_name" id="last_name" value="LN">
        </form>