对于我的输入表单,我在顶部有一个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>
答案 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
}
});
});