如何制作一些必填字段?

时间:2018-02-27 17:31:24

标签: jquery

所以,我希望我的某些字段是必需的,但在输入标记中加入“required”并没有帮助。正如我搜索过的那样,我应该使用表单标签来实现它,但是如果我将字段放在表单标记中,我的代码就不起作用了。无论如何我可以做到不需要更改整个代码就可以填写我的字段吗?

我将把我认为与我的问题相关的代码放在一边。谢谢。

HTML

<!--DOCUMENT INPUT-->
        <div class="row space3" >
            <div class="col-sm-2">
                <input type="text" name="code" id="code" class="form-control" placeholder="Document Code" /> 
            </div>
            <div class="col-sm-2">
                <select name="doc_kind" id="doc_kind" class="form-control" placeholder="Document Kind">
                    <option value="" selected disabled>Kind of Document</option>
                    <option value="Budget Proposal">Budget Proposal</option>
                    <option value="Project Proposal">Project Proposal</option>
                    <option value=""></option>
                </select>
            </div>

            <div class="col-sm-2">
                <input type="datetime-local" name="date_submitted" id="date_submitted" class="form-control" placeholder="Date Submitted" style="width:120%;"/>
            </div>
            <div class="col-sm-3">
                <textarea name="remarks" id="remarks" class="form-control" placeholder="Remarks" style="margin-left: 12%" rows="1"></textarea>
            </div>

                <div class="col-sm-2">
                    <input type="hidden" name="id" id="docu_id" style="margin-left: 12%" />
                        <button class="button add" name="action" id="action">Add</button>
                </div>
                <br><br>
        </div>
<!--END OF DOCUMENT INPUT-->

脚本

$(document).ready(function(){
        fetchDocu();                
        function fetchDocu()
        {
            var action = "select";
            $.ajax({
                url: "select.php",
                method: "POST",
                data: {action:action},
                success: function(data){
                    $('#code').val('');  
                    $('#doc_kind').val('');
                    $('#date_submitted').val('');  
                    $('#remarks').val('');  
                    $('#action').text("Add");  
                    $('#result').html(data);
                }
            });
        }
            $('#action').click(function(){  
                var docCode = $('#code').val();  
                var docKind = $('#doc_kind').val(); 
                var dateSubmitted = $('#date_submitted').val();  
                var docRemarks = $('#remarks').val();  
                var docNote = $('#note').val();  
                var id = $('#docu_id').val();    
                var action = $('#action').text();  
                    if(docCode != '' && docKind != '' && dateSubmitted != '')  
                    {  
                        $.ajax({  
                        url : "action.php",  
                        method:"POST",  
                        data:{docCode:docCode, docKind:docKind, dateSubmitted:dateSubmitted, docRemarks:docRemarks, id:id, action:action},  
                        success:function(data){  
                            alert(data);  
                            fetchDocu();  
                        }  
                    });  
                    }  
                    else {

                    }


    });

1 个答案:

答案 0 :(得分:1)

为了'#34; required&#34;要显示的消息,您必须执行提交事件。如果您将required属性添加到元素中,并将按钮<button class="button add" name="action" id="action">Add</button>更改为:

<button type = "submit" class="button add" name="action" id="action">Add</button>

它应该有用。

快乐的编码!