html 验证表单不工作-表单和验证

db2dz4w8  于 2022-12-02  发布在  其他
关注(0)|答案(2)|浏览(198)
$(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必须为真,如果其中一个字段为空或电话和电子邮件与我的验证不匹配如果为假,则不继续
任何建议,使在javascript部分,或者也许我可以删除这一部分,写另一个更好的...。

wh6knrhe

wh6knrhe1#

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这样的插件

ffscu2ro

ffscu2ro2#

给予一下。您的事件处理程序未附加到按钮。
第一个

相关问题