所以我的问题是这个验证码是否更简单。在用户可以使用其他3个输入之前,我需要检查2个输入。我使用了很多隐藏和显示,为了验证,我使用了很多if / else。所以有人可以帮助我,因为我正在寻找如何缩短这一点。我想要的是使表单在1页上使用。我尝试使用jquery验证插件但没有成功。这是一个小提琴链接,您可以尝试:https://jsfiddle.net/br9603yq/
$(document).ready(function() {
$("#adres").hide();
$("#postcode").hide();
$("#plaats").hide();
$("#click2").hide();
$("#edit").hide();
$("#submit").hide();
//Hide divs with class hidden
$("div.hidden").hide();
$("#click1").click(function() {
var naam = $("#name").val();
// Check if name has class verplicht and if name input isn't empty.
if ($('#name').hasClass('verplicht') && $('#name').val() != "") {
var email = $('#mail').val();
var filter = (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
//if e-mail matches filter
if (filter.test(email)) {
$("#adres").show();
$("#postcode").show();
$("#plaats").show();
$("#click2").show();
$("#click1").hide();
//When click2 is clicked
$("#click2").click(function() {
var adres = $("#adresVeld").val();
var postcode = $("#postcodeVeld").val();
var plaats = $("#plaatsVeld").val();
//Double validation for naam, e-mail normal validation for adres, postcode en plaats.
if ($('#name').hasClass('verplicht') && $('#name').val() != "") {
if (filter.test(email)) {
if ($('#adresVeld').hasClass('verplicht') && $('#adresVeld').val() != "") {
//Hier zit een postcode filter in voor nederlandse postcodes.
if ($('#postcodeVeld').hasClass('verplicht') && $('#postcodeVeld').val() != "" && $('#postcodeVeld').val().match(/^([1-9]\d{3}\s[A-Z]{2})$/)) {
if ($('#plaatsVeld').hasClass('verplicht') && $('#plaatsVeld').val() != "") {
alert("Controleer uw gegevens voordat u verder gaat!");
$("div.hidden").show();
$("#edit").show();
$("#submit").show();
$("#nameShow").hide();
$("#mailShow").hide();
$("#adres").hide();
$("#postcode").hide();
$("#plaats").hide();
$("#click2").hide();
//Geef waardes van ingevulde form aan het nieuwe form
$("#nameUitlees").val(naam);
$("#mailUitlees").val(email);
$("#adresUitlees").val(adres);
$("#postcodeUitlees").val(postcode);
$("#plaatsUitlees").val(plaats);
$("#edit").click(function() {
$("div.hidden").hide();
$("#nameShow").show(naam);
$("#mailShow").show(email);
$("#adres").show(adres);
$("#postcode").show(postcode);
$("#plaats").show(plaats);
$("#click2").show();
$("#edit").hide();
$("#submit").hide();
});
$("#submit").click(function() {
alert("succes");
});
} else {
alert("Uw plaats klopt niet!");
}
} else {
alert("Uw postcode klopt niet!");
}
} else {
alert('Uw adres is leeg of klopt niet!');
}
} else {
alert('Uw email klopt niet!');
}
} else {
alert('Uw naam klopt niet!');
}
});
} else {
alert("mail klopt niet");
}
} else {
alert("naam klopt niet");
}
});
});
这是我的html表单。
<form class="large-6 small-10 form" id="testform1">
<div id="nameShow">
<p>
<label>
<h3>Name: </h3></label>
<input type="text" id="name" class="verplicht" placeholder="Name">
</p>
</div>
<div id="mailShow">
<p>
<label>
<h3>Email: </h3></label>
<input type="email" id="mail" class="verplicht" placeholder="example@example.com">
</p>
</div>
<p>
<input type="submit" value="volgende" id="click1">
</p>
<div id="adres">
<p>
<label>
<h3>Adres: </h3></label>
<input type="text" id="adresVeld" class="verplicht" placeholder="adres">
</p>
</div>
<div id="postcode">
<p>
<label>
<h3>Postcode: </h3></label>
<input type="text" id="postcodeVeld" class="verplicht" placeholder="1234 AA">
</p>
</div>
<div id="plaats">
<p>
<label>
<h3>Plaats: </h3></label>
<input type="text" id="plaatsVeld" class="verplicht" placeholder="Rotterdam">
</p>
</div>
<p>
<input type="submit" value="controle" id="click2">
</p>
</form>
<!-- hidden uitlees divjes -->
<form class="large-6 small-10 form" id="checkform">
<div>
<p>
<label>
<h3>Name: </h3></label>
<input type="text" id="nameUitlees" class="verplicht" readonly>
</p>
</div>
<div>
<p>
<label>
<h3>Email: </h3></label>
<input type="email" id="mailUitlees" class="verplicht" readonly>
</p>
</div>
<div>
<p>
<label>
<h3>Adres: </h3></label>
<input type="text" id="adresUitlees" class="verplicht" readonly>
</p>
</div>
<div>
<p>
<label>
<h3>Postcode: </h3></label>
<input type="text" id="postcodeUitlees" class="verplicht" readonly>
</p>
</div>
<div>
<p>
<label>
<h3>Plaats: </h3></label>
<input type="text" id="plaatsUitlees" class="verplicht" readonly>
</p>
</div>
<p>
<input type="button" value="pas aan" id="edit">
</p>
<p>
<input type="button" value="verzend" id="submit">
</p>
</from>