Javascript/jquery验证必填字段

我搜索了很多，但找不到我的问题的答案。首先，我想有一个提交按钮，如果所有必填字段未填写，将会禁用该按钮。我发现了一些例子，如果所有的字段都填满了，但我有要求和不需要的所以，我需要找到是否所需的填充或不。我目前没有如何使它发生的想法。为了以防万一，我在Scala中使用了play framework 2.1.x。Javascript/jquery验证必填字段

干杯， Ilgün

来源

2013-10-01 Ducaz035

我一直在努力使用您的解决方案，

这是我的输入：

<input class="required" placeholder="Required Field" required="true" name="tracktitle" type="text">

但是，按钮没有转到启用状态。

JS：

<script> 
$(function() { 
    var submitButton = $("#myForm input[type='submit']").attr("disabled", true); 
    $("#myForm input.required").change(function() { 
     var valid = true; 
     $.each($("#myForm input.required"), function (index, value) { 
      alert("comes here"); 
      if(!$(value).val()){ 
       valid = false; 
      } 
     }); 
     if(valid){ 
      $(submitButton).attr("disabled", false); 
      console.log("valid"); 
      alert("valid"); 
     } 
     else{ 
      $(submitButton).attr("disabled", true); 
     } 
    }); 
}); 

</script>

我的提交按钮：

<input type="submit" class="btn btn-primary" value="Submit" id="form-submit" onclick="return myConfirm();" />

来源

2013-10-01 13:28:20 Ducaz035

下面是一个简单的例子：

首先，你可以找出一类的要求必填字段：

<form id="myForm"> 
    *<input type="text" class="required" /></br> 
    *<input type="text" class="required" /></br> 
    <input type="text" /></br> 
    <input type="text" /></br> 
    <input type="submit"/> 
</form>

最初禁用提交按钮：

var submitButton = $("#myForm input[type='submit']").attr("disabled", true);

然后使用jQuery来循环每次更改时都会输入您的输入，并检查其中是否有值。如果他们都有一个值，然后启用提交按钮，如果不将其禁用：

$("#myForm input.required").change(function() { 
     var valid = true; 
     $.each($("#myForm input.required"), function (index, value) { 
      if(!$(value).val()){ 
       valid = false; 
      } 
     }); 
     if(valid){ 
      $(submitButton).attr("disabled", false); 
     } 
     else{ 
      $(submitButton).attr("disabled", true); 
     } 
    });

请参阅本jsFiddle与你正在使用jQuery描述一个简单的例子。

来源

2013-10-01 12:54:56

这只是普通的HTML一些基本的东西/ JS显示输入验证的一个可行的办法：

HTML：

<html> 
     <form id="form"> 
     <input class="form-input" data-required="true" type="text" /> 
     <input class="form-input" data-required="true" type="text" /> 

     <input class="form-input" data-required="false" type="text" /> 
     <input class="form-input" data-required="false" type="text" /> 

     <input id="form-submit" type="submit" disabled /> 
     </form> 
    </html>

JS：

$(document).ready(function() { 
     // on input change: 
     $(".form-input").on('change', function() { 
     // hide the input (not neccessary) 
     $("#form-submit").hide(); 
     // enable it 
     $("#form-submit").removeProp("disabled"); 

     // check all inputs 
     $.each(".form-input", function() { 
      // read element values 
      var required = $(this).data("required"); 
      var empty = ($(this).val() == "" || $(this).val() == null) 
      // if element is required but empty: 
      if (required && empty) { 
      // disable submit button 
      $("#form-submit").prop("disabled", "disabled"); 
      } 
     }   

     // now the submit button is enabled if all required inputs are filled 
     // and it is disabled if at least one required input is empty 

     // after hiding it: make the button visible again (not neccessary) 
     $("#form-submit").show(); 
     } 
    });

来源

2013-10-01 12:59:40 naloxx

Javascript/jquery验证必填字段

回答

相关问题