Question

我已添加此脚本。

<script>
    $(document).ready(function() { 
        $('#submit-button').click(function() { 
            $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 

            setTimeout($.unblockUI, 8000); 
        }); 
    }); 

</script>

这是我的输入类型提交。

<input type="submit" name="submit" value="AM I ELIGIBLE?" id="submit-button" >

现在，问题是，即使我没有为其他输入类型（名字，电话号码，电子邮件）设置输入，我也会在点击提交按钮后运行加载屏幕。：（

我希望一旦表单验证正常就可以运行。

我正在使用jquery.blockUI.js

谢谢你们！：）

这是我的新代码：

<script>
        $(document).ready(function() { 
            $('#submit-button').click(function() { 


            //First set your var for the fields you want. the $() is the id of the field in your html 
                var firstName = $("#first-name").text();
                var lastName = $("#last-name").text();
                if(firstName != "")//&&(lastName != ""))
                {

                $.blockUI({ css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: .5, 
                    color: '#fff' 
                } }); 

                setTimeout($.unblockUI, 8000); 

                }
                // else{
                // // in here you'll do what ever you wanted to for instance.

                // alert("Please make sure all fields are filled out");
                // }

            });         
        }); 

        </script>

---

现在，我有一个滑块..

<p class="slider1">Your approximate total debt: 
  <output name="slider_output1" id="slider_output1" for="form_slider1">0</output><br>                                                   
  <input type="range" class="form_slider1" name="form_slider1" id="form_slider1"
   value="0" min="0" max="60000" step="100" 
   oninput="slider_output1.value=form_slider1.value" 
   onchange="slider_output1.value=value"/>  

</p>

我需要在条件语句中添加它，以便如果表单的值为＆＃34; 0＆＃34;则表单不会通过。

我试过用这个..

var slider1 = $("#form_slider1").val();

然后， if（firstName！=＆＃34;＆＃34;＆amp;＆amp; lastName！=＆＃34;＆＃34;＆amp;＆amp; email！=＆＃34;＆＃34;＆amp;＆amp; phone！= ＆＃34;＆＃34;＆amp;＆amp; doorNumber！=＆＃34;＆＃34;＆amp;＆amp;＆quot; postcode！=＆＃34;＆＃34;＆amp;＆amp;（phoneLength.length＆gt; 9 | | phoneLength.length＆lt; 12））＆amp;＆amp; slider1＆gt; 0）

但是，我认为它忽略了slider1＆gt; 0，加载屏幕也没有显示。

如果不清楚，请告诉我。：（

Answer 1

您走在正确的道路上，首先需要做的就是检查这些字段。

           <script>
    $(document).ready(function() { 
        $('#submit-button').click(function() {
//First set your var for the fields you want. the $() is the id of the field in your html 
var firstName = $("#FirstName").text();
if(firstName != "")
{
            $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 
 setTimeout($.unblockUI, 8000);
}else{
// in here you'll do what ever you wanted to for instance.

alert("Please make sure all fields are filled out");
}

        }); 
    }); 

</script>

试试这个

<script>
    $(document).ready(function() { 
        $('#submit-button').click(function() { 


        //First set your var for the fields you want. the $() is the id of the field in your html 
            var firstName = $("#first-name").text().trim();
            var lastName = $("#last-name").text().trim();
           //Also use alert to make sure the field are really being filled out
            alert(firstName + " " + lastName);

            if(firstName == "" && lastName == "")
            {
             // // in here you'll do what ever you wanted to for instance.
              alert("Please make sure all fields are filled out");
            }
            else{

              $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 

            setTimeout($.unblockUI, 8000); 

           }

        });         
    }); 

    </script>

Answer 2

这应该有效，我将.text（）更改为.val（）。我也注意到在你的网站上，当你点击f12时，你需要处理两个错误。

<script>
$(document).ready(function() { 
    $('#submit-button').click(function() { 


    //First set your var for the fields you want. the $() is the id of the field in your html 
        var firstName = $("#first-name").val().trim();
        var lastName = $("#last-name").val().trim();
       //Also use alert to make sure the field are really being filled out
        alert(firstName + " " + lastName);

        if(firstName == "" && lastName == "")
        {
         // // in here you'll do what ever you wanted to for instance.
          alert("Please make sure all fields are filled out");
        }
        else{

          $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 

        setTimeout($.unblockUI, 8000); 

       }

    });         
}); 

</script>

提交表格后加载屏幕

2 个答案: