用jquery验证前端表单

时间:2015-02-09 15:32:29

标签: jquery validation if-statement

对于我的输入表单,我在顶部有一个ID位置。现在我添加了一个php后端验证,现在我想要在提交表单之前进行验证。

我用jQuery做了这个。唯一的问题是不需要ID字段。但是,当有人输入ID时,表单将成为更新表单,用户无需填写其余字段

我如何使用jquery创建一个if语句(如php)if if(id field)输入然后不需要其他字段?

        <fieldset>
            <legend>Add/edit carModels</legend>
            <div class="info">
            <p class="text-primary"><span class="requiredField">*</span> Required for new inputs</p>
            <p class="text-primary"><span class="requiredEdit">*</span> Only required for edits</p>
            <p class="text-primary"><span class="requiredEdit">*</span> If you want to update items you only have to fill in the values you want to update</p>
            </div>

            <div class="form-group">
                <label for="nid" class="col-lg-2 control-label">Nid<span class="requiredEdit">*</span></label>
                <div class="col-lg-2">
                    <input type="number" class="form-control" id="nid" name="nid">
                </div>
            </div>

            <div class="form-group">
                <label for="title" class="col-lg-2 control-label">Title<span class="requiredField">*</span></label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="title" name="title" data-validation="length" data-validation-length="min4">
                </div>
            </div>

            <div class="form-group">
                <label for="model" class="col-lg-2 control-label">Car Model<span class="requiredField">*</span></label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="model" name="model">
                </div>
            </div>  

            <div class="form-group">
                <label for="brand" class="col-lg-2 control-label">Car Brand<span class="requiredField">*</span></label>
                <div class="col-lg-4">
                    <div class="radio">
                      <label>
                        <input type="radio" name="brandOption" id="mercedes" value="mercedes">
                        Mercedes
                      </label>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio" name="brandOption" id="toyota" value="toyota">
                        Toyota
                      </label>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio" name="brandOption" id="renault" value="renault">
                        Renault
                      </label>
                    </div>
                  </div>
                </div>

            <input type="hidden" name="type" value="carmodels">

            <div class="form-group">
                <label for="color" class="col-lg-2 control-label">Color<span class="requiredField">*</span></label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="color" name="color">
                </div>
            </div>

            <div class="form-group">
                <label for="engine" class="col-lg-2 control-label">Engine<span class="requiredField">*</span></label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="engine" name="engine">
                </div>
            </div>

            <div class="form-group">
                <label for="fuel" class="col-lg-2 control-label">Fuel<span class="requiredField">*</span></label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="fuel" name="fuel">
                </div>
            </div>

            <div class="form-group">
                <label for="fuel" class="col-lg-2 control-label">Date build<span class="requiredField">*</span></label>
                <div class="col-lg-10">
                    <select name="day">
                        <option value="">Day</option>
                        <?php for($i = 1; $i <= 31; $i++) {
                            echo "<option value='" . ($i<10 ? "0" : "") . $i . "'>$i</option>"; 
                        } ?>
                    </select>
                    <select name="month">
                        <option value="">Month</option>
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                    <select name="year">
                        <option value="">Year</option>
                        <?php for($i = 1990; $i <= 2015; $i++) {
                            echo "<option value='" . $i . "'>" . $i . "</option>";
                        } ?>
                    </select>
                </div>
            </div>  
            <div class="form-group">
              <div class="col-lg-10 col-lg-offset-2">
                <button type="submit" name="submit" class="btn btn-primary">Submit</button>
              </div>
            </div>
        </fieldset>
    </form>
    <?php

    if(isset($_GET['status'])) {
        if($_GET['status'] == 'updated') {
        echo '<div class="alert alert-dismissable alert-info">
          <button type="button" class="close" data-dismiss="alert">×</button>
          You have succesfully edited an item</a>.
        </div>';
        } elseif($_GET['status'] == 'new') {
        echo '<div class="alert alert-dismissable alert-success">
          <button type="button" class="close" data-dismiss="alert">×</button>
          You have succesfully added a new item named: ' . $_GET['name'] . '</a>.
        </div>';
        }

    }

    if(isset($_GET['error'])) {
        echo '<div class="alert alert-dismissable alert-danger">
          <button type="button" class="close" data-dismiss="alert">×</button>
          ' . $_GET['error'] . '</a>.
        </div>';
    }

    ?>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function(){
        $(".close").click(function(){
            $(".alert").css("display", "none");
        });
    });
</script>
<script> $.validate(); </script>

1 个答案:

答案 0 :(得分:1)

这是一个简单的演示。您可以从snippet获得帮助。

<强> HTML

<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

<强>的jQuery

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});