【问题标题】:How to check if the user has not entered the data to a form (befor sending)?如何检查用户是否没有在表单中输入数据(发送前)?
【发布时间】:2013-01-16 23:54:41
【问题描述】:

我有一些姓名输入表单:所有者、号码、城市

<input id="id_owner" type="text" name="owner" maxlength="250" />
<input id="id_number" type="text" name="number" maxlength="250" />
<input id="id_city" type="text" name="city" maxlength="250" />

如何检查用户是否没有从该代码中将数据输入到不显示此对话框的表单(发送前):

<a type="submit" name"save-continue-to-review" data-toggle="modal" data-target="#dialog" href=""
class="btn primary btn-primary" title="Order">Order
</a>

它会显示另一个

这里是完整代码:http://wklej.org/id/927806/

【问题讨论】:

    标签: javascript jquery twitter-bootstrap


    【解决方案1】:

    最终您将能够使用 HTML5 表单验证。但在那之前,请使用一些像这样的 jQuery 代码。 (只是因为你用 jQuery 标记了这个问题。你可以用 vanilla JS 来做。)

    (未经测试的代码,但应该可以工作)

    var fields = $('input')
    
    $('form').submit(function(e){
        e.preventDefault()
        valid = true
        fields.each(function(){
            if ($(this).val() == null) {
                valid = false
            }
        });
    
        if (valid == true) {
            $('form').submit()
        } else {
            alert("At least one field was not valid!")
        }
    });
    

    【讨论】:

    • $(this).val() 返回一个空字符串。
    • 您的alert 不准确,因为如果您使用这种方法,多个字段可能无效。
    • 另外,您可能希望限定您的$('input')。很抱歉吹毛求疵
    • @ricardo 如果输入未填写,它将执行此操作:api.jquery.com/val
    • 是的,应该。如果你写了一个有问题的 jsfiddle,我可以进一步解决它。
    【解决方案2】:

    1) 在您的表单上添加此内容

    onsubmit="return validateForm(this);" 
    

    2)验证函数(检查字段是否为空)

    function validateform(formObj)
    {
      inputs = formObj.GetElementsByTagName('input');
    
      for(i=0; i < inputs.length; i++)
      {
        if($.trim(inputs[i].value) == '')
        {
           alert('Field: ' + inputs[i].name + ' is empty!');
           return false;
        }
      }  
      return true;
    }
    

    【讨论】:

      【解决方案3】:
      if ( !$(this).val() ) {
        valid = false
      }
      

      也许this post对你有用

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2020-04-03
        • 1970-01-01
        • 2014-06-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多