blocks|key|101146|text|您可以使用'required‘http://jsbin.com/atefuq/1/edit|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|101147|<form+action="login.php"+method="post">
++++<label>Login+Name:</label>
++++<input+required+type="text"+name="email"+id="log"+/>
++++<label>Password:</label>
++++<input+required+type="password"+name="password"+id="pwd"+/>
++++<input++required+type="submit"+name="submit"+value="Login"+/>
</form>|code-block|syntax|javascript|101148|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/atefuq/1/edit^0|F|U|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can use 'required' <a href="http://jsbin.com/atefuq/1/edit">http://jsbin.com/atefuq/1/edit</a></p>

<pre><code>&lt;form action="login.php" method="post"&gt;
    &lt;label&gt;Login Name:&lt;/label&gt;
    &lt;input required type="text" name="email" id="log" /&gt;
    &lt;label&gt;Password:&lt;/label&gt;
    &lt;input required type="password" name="password" id="pwd" /&gt;
    &lt;input  required type="submit" name="submit" value="Login" /&gt;
&lt;/form&gt;
</code></pre>


blocks|key|101164|text|您应该尝试使用jquery验证插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|101165|$('form').validate({
+++rules:{
+++++++email:{
++++++++++required:true,
++++++++++email:true
+++++++}
+++},
+++messages:{
+++++++email:{
++++++++++required:"Email+is+required",
++++++++++email:"Please+type+a+valid+email"
++++++++}
+++}
})|code-block|syntax|javascript|101166|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you should try with jquery validate plugin :</p>

<pre><code>$('form').validate({
   rules:{
       email:{
          required:true,
          email:true
       }
   },
   messages:{
       email:{
          required:"Email is required",
          email:"Please type a valid email"
        }
   }
})
</code></pre>


blocks|key|318261|text|一个简单的解决方案是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|318262|$(+"form"+).on(+"submit",+function()+{+

+++var+has_empty+=+false;

+++$(this).find(+'input[type!="hidden"]'+).each(function+()+{

++++++if+(+!+$(this).val()+)+{+has_empty+=+true;+return+false;+}
+++});

+++if+(+has_empty+)+{+return+false;+}
});|code-block|syntax|javascript|318263|注意：jQuery.on()方法只在jQuery版本的1.7%2B中可用，但它现在是附加事件处理程序的首选方法。|offset|length|style|CODE|318264|此代码遍历表单中的所有输入，如果其中任何输入没有值，则通过返回false来阻止表单提交。注意，它不会向用户显示任何类型的消息，说明表单提交失败的原因(我强烈建议添加一个)。|318265|或者，您可以查看jQuery+validate插件。它能做到这一点，还能做更多的事情。|318266|注意:这种类型的技术应该始终与服务器端验证结合使用。|318267|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/|1|http://bassistance.de/jquery-plugins/jquery-plugin-validation/^0|0|0|3|B|3|B|0|0|0|8|F|1|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@$I|17|J|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@$I|1C|J|1D|1|1E]]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>A simple solution would be something like this</p>

<pre><code>$( "form" ).on( "submit", function() { 

   var has_empty = false;

   $(this).find( 'input[type!="hidden"]' ).each(function () {

      if ( ! $(this).val() ) { has_empty = true; return false; }
   });

   if ( has_empty ) { return false; }
});
</code></pre>

<p>Note: The <a href="http://api.jquery.com/on/" rel="noreferrer"><code>jQuery.on()</code></a> method is only available in jQuery version 1.7+, but it is now the preferred method of attaching event handlers.</p>

<p>This code loops through all of the inputs in the form and prevents form submission by returning false if any of them have no value. Note that it doesn't display any kind of message to the user about why the form failed to submit (I would strongly recommend adding one).</p>

<p>Or, you could look at the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="noreferrer">jQuery validate</a> plugin. It does this and a lot more.</p>

<p>NB: This type of technique should always be used in conjunction with server side validation.</p>


blocks|key|101202|text|您需要向表单submit事件添加一个处理程序。在处理程序中，您需要检查每个文本字段，如果这些值不为空，请选择元素和密码字段。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|101203|$('form').submit(function()+{
+++++var+res+=+true;
+++++//+here+I+am+checking+for+textFields,+password+fields,+and+any+
+++++//+drop+down+you+may+have+in+the+form
+++++$("input[type='text'],select,input[type='password']",this).each(function()+{
+++++++++if($(this).val().trim()+==+"")+{
+++++++++++++res+=+false;+
+++++++++}
+++++})
+++++return+res;+//+returning+false+will+prevent+the+form+from+submitting.
});|code-block|syntax|javascript|101204|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/submit/^0|6|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>you need to add a handler to the form <a href="http://api.jquery.com/submit/" rel="nofollow">submit</a> event. In the handler you need to check for each text field, select element and password fields if there values are non empty. </p>

<pre><code>$('form').submit(function() {
     var res = true;
     // here I am checking for textFields, password fields, and any 
     // drop down you may have in the form
     $("input[type='text'],select,input[type='password']",this).each(function() {
         if($(this).val().trim() == "") {
             res = false; 
         }
     })
     return res; // returning false will prevent the form from submitting.
});
</code></pre>


blocks|key|318290|text|我真的很讨厌那些不告诉我缺少什么输入的表单。所以我改进了Dominic的回答--谢谢。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|318291|在css文件中，将"borderR“类设置为border+red+color。|318292|$('#<form_id>').submit(function+()+{
++++var+allIsOk+=+true;

++++//+Check+if+empty+of+not
++++$(this).find(+'input[type!="hidden"]'+).each(function+()+{
++++++++if+(+!+$(this).val()+)+{+
++++++++++++$(this).addClass('borderR').focus();
++++++++++++allIsOk+=+false;
++++++++}
++++});

++++return+allIsOk
});|code-block|syntax|javascript|318293|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I really hate forms which don't tell me what input(s) is/are missing.
So I improve the Dominic's answer - thanks for this.</p>

<p>In the css file set the "borderR" class to border has red color.</p>

<pre><code>$('#&lt;form_id&gt;').submit(function () {
    var allIsOk = true;

    // Check if empty of not
    $(this).find( 'input[type!="hidden"]' ).each(function () {
        if ( ! $(this).val() ) { 
            $(this).addClass('borderR').focus();
            allIsOk = false;
        }
    });

    return allIsOk
});
</code></pre>


blocks|key|101232|text|function+isEmpty(val)+{
if(val.length+==0+%7C%7C+val.length+==null){
++++return+'emptyForm';
}else{
++++return+'not+emptyForm';
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|101233|}|unstyled|101234|$(document).ready(function(){enter+code+here
++++$(+"form"+).submit(function(+event+)+{
++++++++$('input').each(function(){
+++++++++++var+getInputVal+=+$(this).val();
++++++++++++if(isEmpty(getInputVal)+=='emptyForm'){
++++++++++++++++alert(isEmpty(getInputVal));
++++++++++++}else{
++++++++++++++++alert(isEmpty(getInputVal));
++++++++++++}
++++++++});
++++++++event.preventDefault();
++++});
});|101235|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>function isEmpty(val) {
if(val.length ==0 || val.length ==null){
    return 'emptyForm';
}else{
    return 'not emptyForm';
}
</code></pre>

<p>}</p>

<pre><code>$(document).ready(function(){enter code here
    $( "form" ).submit(function( event ) {
        $('input').each(function(){
           var getInputVal = $(this).val();
            if(isEmpty(getInputVal) =='emptyForm'){
                alert(isEmpty(getInputVal));
            }else{
                alert(isEmpty(getInputVal));
            }
        });
        event.preventDefault();
    });
});
</code></pre>


blocks|key|101239|text|var+save_val+=+$("form").serializeArray();
$(save_val).each(function(+index,+element+)+{
++++alert(element.name);
++++alert(element.val);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|101240|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var save_val = $("form").serializeArray();
$(save_val).each(function( index, element ) {
    alert(element.name);
    alert(element.val);
});
</code></pre>


<p>How could I use jQuery to check if text-fields are empty when submitting without loading <code>login.php</code>?</p>

<pre><code>&lt;form action="login.php" method="post"&gt;
    &lt;label&gt;Login Name:&lt;/label&gt;
    &lt;input type="text" name="email" id="log" /&gt;
    &lt;label&gt;Password:&lt;/label&gt;
    &lt;input type="password" name="password" id="pwd" /&gt;
    &lt;input type="submit" name="submit" value="Login" /&gt;
&lt;/form&gt;
</code></pre>

<p>Thanks.</p>


How to check if text fields are empty on form submit using jQuery?

在不加载login.php的情况下提交时，如何使用jQuery检查文本字段是否为空<form action="login.php" method="post">    <label>Login Name:</label>    <input type="text" name="email" id="log" />   ...

问如何使用jQuery检查表单提交中的文本字段是否为空？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery检查表单提交中的文本字段是否为空？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery检查表单提交中的文本字段是否为空？
EN