我曾试图制作巫师模态。在进入第二个模态之前，应该验证第一个模态表单字段我尝试使用jQuery进行此操作。
我尝试在未输入字段时将文本框设置为红色，如果将数据输入字段，则会变为灰色。当我点击保存时，它将转到modalTwo，在转到模式2之前，它应检查必填字段。
当我点击保存文字时，应该验证表格。我的意思是每个输入字段都必须填写。
$("#modalOne").modal("show");
$('.modalEditBtn').click(function() {
if ($('.modalEdit').is('[readonly]')) { //checks if it is already on readonly mode
$('.modalEdit').prop('readonly', false); //turns the readonly off
} else { //else we do other things
var school = document.getElementById('sslc').value;
if (school == "") {
document.getElementById('sslc').style.borderColor = "red";
return false;
} else {
document.getElementById('sslc').style.borderColor = "#cccccc";
}
$('.modalEdit').prop('readonly', true);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal One -->
<div class="modal" id="modalOne">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<button type="button" class="close" data-dismiss="modal">
<font color="black">
<a href="#" style="color: darkred">
<span style="color: darkred;">×</span>
</a>
</font>
</button>
<label class=" col-sm-4">Edit <span class="text">
<a class="modalEditBtn" data-dismiss="modal" data-toggle="modal" data-target="#modalTwo">Save</a>
</span></label> <br />
<div class="container">
<div class="row">
<div class="col-md">
<div class="form-body">
<br />
<table class="table table-responsive">
<tbody>
<tr>
<td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;">
<select id="sslc" class="form-control" oninput="this.className = ''">
<option hidden value="">10th</option>
<option value="a">10th</option>
<option value="b">12th</option>
<option value="a">Degree</option>
<option value="b">Masters</option>
<option value="b">Cetificate</option>
</select>
</td>
<td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;">
<select id="inputStream" class="form-control modalEdit">
<option hidden value="">Degree</option>
<option value="ar">BCA</option>
<option value="cm">BSc</option>
<option value="sc">BBA</option>
</select>
</td>
</tr>
<tr>
<td class="outside" style="border-style: none; border-bottom-style: none;">Stream
<select id="inputStream" class="form-control" required oninvalid="this.setCustomValidity('Stream Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Stream</option>
<option value="ar">Arts</option>
<option value="cm">Commerce</option>
<option value="sc">Science</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Institution
<select id="inputStream" class="form-control" required oninvalid="this.setCustomValidity('Stream Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Institution</option>
<option value="ar">VTU</option>
<option value="cm">Anna</option>
<option value="sc">Bangalore</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Yr of Passing <input type="date" class="form-control" id="resizedTextbox" placeholder="Yr of Passing" />
</td>
</tr>
<tr>
<td class="outside" style="border-style: none; border-bottom-style: none;">State
<select id="inputState" class="form-control" required oninvalid="this.setCustomValidity('State Required')" oninput="this.setCustomValidity('')">
<option hidden value="">State</option>
<option value="is">Karnataka</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Country
<select id="inputCountry" class="form-control" required oninvalid="this.setCustomValidity('Country Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Country</option>
<option value="is">India</option>
<option value="is">US</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;"><br>
<input type="file" size="80"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Two -->
<div class="modal" id="modalTwo" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="alert alert-info" style="width: 99%; margin-bottom: 2px;">
<br>
<center>Do you want add another record</center>
<br>
<center>
<button type="button" class="btn btn-warning" data-dismiss="modal" data-toggle="modal" data-target="#modalOne" style="background-color: lightblue; border-color: #edf1ed;">Yes</button>
<button type="button" class="btn btn-success " data-dismiss="modal" data-toggle="modal" data-target="#modalThree" style="background-color: lightblue; border-color: #edf1ed;">No</button>
<br />
</center>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Two -->
<div class="modal" id="modalThree" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<div class="alert alert-info" style="width: 95%; margin-bottom: 2px;">
<center>NN records saved</center>
<br>
<button type="button" class="btn btn-warning" data-dismiss="modal" data-toggle="modal" data-target="close" style="background-color: lightblue; border-color: #edf1ed;">Ok</button>
<br />
</center>
</div>
</div>
</div>
</div>