提交前的表单验证 [英] Form validation before Submit

问题描述

我有以下表单需要输入到数据库中，但我希望在将其保存到数据库之前对其进行验证：

<form name="add_walkin_patient_form" class="add_walkin_patient_form" id="add_walkin_patient_form"  autocomplete="off" >

                <div class="form-line">

                    <div class="control-group">
                        <label class="control-label">
                            Patient Name
                        </label>
                        <div class="controls">
                            <input type="text" name="patientname" id="patientname" required="" value=""/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            Patient Phone Number
                        </label>
                        <div class="controls">
                            <input type="text" name="patient_phone" id="patient_phone" required="" value=""/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            Department
                        </label>
                        <div class="controls">
                            <select name="department" required="" class="department" id="department">
                                <option value="">Please select : </option>
                                <option value="Pharmacy">Pharmacy</option>
                                <option value="Laboratory">Laboratory</option>
                                <option value="Nurse">Nurse</option>

                            </select>
                        </div>
                    </div>
                </div>

                <button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right">
                    Add Walk In Patient
                </button>
            </form>

提交由jQuery脚本使用以下脚本完成：

<script type="text/javascript">

    $(document).ready(function () {
        //delegated submit handlers for the forms inside the table
        $('#add_walkin_patient_button').on('click', function (e) {
            e.preventDefault();

            //read the form data ans submit it to someurl
            $.post('<?php echo base_url() ?>index.php/reception/add_walkin', $('#add_walkin_patient_form').serialize(), function () {
                //success do something

                // $.notify("New Patient Added Succesfully", "success",{ position:"left" });
                $(".add_walkin_patient_form").notify(
                        "New Walkin Patient Added Successfully",
                        "success",
                        {position: "center"}
                );
                setInterval(function () {
                    var url = "<?php echo base_url() ?>index.php/reception/";
                    $(location).attr('href', url);
                }, 3000);


            }).fail(function () {
                //error do something
                $(".add_walkin_patient_form").notify(
                        "There was an error please try again later or  contact the system support desk  for assistance",
                        "error",
                        {position: "center"}
                );

            })
        })

    });

</script>

如何在将输入提交到脚本之前进行表单验证以检查输入是否为空？

推荐答案

我正在使用Java脚本进行验证。 表单代码如下：

<form action="upload.php" method="post" onSubmit="return validateForm()">
    <input type="text" id="username">
    <input type="text" password="password">
    <input type="submit" value='Login' name='login'>
</form>

要执行验证，请编写一个Java脚本函数：

<script>
  function checkform(){
    var uname= document.getElementById("username").value.trim().toUpperCase();

    if(uname=== '' || uname=== null) {
      alert("Username is blank");
      document.getElementById("username").backgroundColor = "#ff6666";
      return false;
    }else document.getElementById("username").backgroundColor = "white";

    var pass= document.getElementById("password").value.trim().toUpperCase();

    if(pass=== '' || pass=== null) {
       alert("Password is blank");
       document.getElementById("password").backgroundColor = "#ff6666";
       return false;
     }else document.getElementById("password").backgroundColor = "white";

    return true;
  }
</script>

这篇关于提交前的表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！