For my input form I have an ID place in the top. Now I added a php backend validation and now I want a validation before the form to be submitted.
I did this with jQuery. The only thing is that the ID field is not required. But when someone enters the ID the form becomes an update form and the user does not have to fill in the rest of the fields
How can i make an if statement (like php) with jquery if (id field) is entered then not require other fields?
<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://ift.tt/Pg8IDD"></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>
Aucun commentaire:
Enregistrer un commentaire