验证模态引导程序中的数据ajax

时间:2015-05-07 12:38:17

标签: jquery ajax twitter-bootstrap

我有一个模态引导程序,其中包含必须像这样填充的字段:

 <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h2 id="mainTitle">No.request : <strong></strong></h2>
        </div>

        <div class="modal-body">

            <table class="table table-striped table-condensed">
                <tbody>
                    <tr>
                        <td valign="top">
                            <label class="control-label">Notes</label>
                        </td>

                        <td>
                            <div class="control-group ">
                                <div class="controls">
                                    <textarea class="cleditor span10"  id="modalCatatan" rows="3" name="notes"></textarea>
                                </div>
                            </div>
                        </td>
                    </tr>


                    <tr>

                        <td colspan="2"><h3>Estimated over</h3></td>
                    </tr>

                    <tr>
                        <td valign="top">
                            <label class="control-label">Date </label>
                        </td>

                        <td>
                            <div class="controls">
                                <input type="text" class="input-small datepicker" id="tanggal" value="<?php echo date("d-m-Y"); ?>">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td valign="top">
                            <label class="control-label">Hour</label>
                        </td>

                        <td>
                            <div class="controls">
                                <select id="hour" class="input-small">
                                    <?php
                                    for ($i = 8; $i <= 21; $i++) {
                                        if ($i < 10) {
                                            echo "<option value='" . $i . "'> 0" . $i . "</option>";
                                        } else {
                                            echo "<option value='" . $i . "'>" . $i . "</option>";
                                        }
                                    }
                                    ?>
                                </select>

                                :

                                <select id="minute" class="input-small">
                                    <?php
                                    for ($i = 0; $i <= 59; $i++) {
                                        if ($i < 10) {
                                            echo "<option value='" . $i . "'> 0" . $i . "</option>";
                                        } else {
                                            echo "<option value='" . $i . "'>" . $i . "</option>";
                                        }
                                    }
                                    ?>
                                </select>

                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="modal-footer">
            <a href="#" id="btn-footer" class="btn btn-danger" req_id="<?php echo $data['id_request']; ?>">Yes</a>
            <a href="#" id="btn-batal" class="btn" data-dismiss="modal">No</a>   
        </div>
    </div>

要在此模式中发送一些数据,我在jquery中使用ajax,就像这样

 $('#btn-footer').click(function(e) {
                e.preventDefault();


                var id = $("#mainTitle strong").text().split("/").pop();/*ambil id*/
                var notes = $('#modalCatatan').val(); /*ambil comment*/

                var date = $('#tanggal').val(); /*ambil tanggal*/
                var hour = $('#hour').val(); /*ambil jam*/
                var minute= $('#hour').val();


                hour = hour + ":" + minute

                $.ajax({
                    url: '<?php echo base_url() . 'control_closing/kasihCatatan/' ?>',
                    type: 'POST',
                    data: {id: id,
                        notes: notes,
                        date: date,
                        hour: hour
                    },
                    dataType: 'json',
                    success: function(obj) {
                        alert('Update Success');
                        location.reload();
                    }
                });
            });

我的问题是,如何验证上面ajax中的数据?假设如果textarea为空,则会显示“文本区域不允许为空”的消息。谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

你试过像

这样的事吗?
if( notes.length == 0 )
{
  // Logic to set an error message
  return false;
}

然后清除点击上的错误消息,或者使用setTime并在x秒后淡出错误消息