Used below HTML & JS for development. Everything works fine as expected. But, JS code looks longer for smaller function.
Is it possible to make simple function to make code clean?
Most of functions are repeating many times with different ID and class name.
Thanks
HTML:
<form method="POST" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 name form-validate">
<div class="form-title">Full name</div>
<input type="text" name="Full Name" id="name" data-fullname="Full name is missing">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="questions" id="question-one" data-question--one="Question1 answer is missing">Question 1</div>
<input type="radio" name="Question1">
<label>Answer 1</label>
<input type="radio" name="Question1">
<label>Answer 2</label>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 preferredCity">
<div class="form-group">
<div class="form-title">Preferred city of departure</div>
<select class="select form-control input-lg" id="preferredCity" name="preferredCity" data-preferredcity="Preferred city is missing"></select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 email form-validate">
<div class="form-title">Email address</div>
<input type="text" name="Email Address" id="email" data-email="Email address is not valid">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<a class="btn" id="btn" href="javascript:void(0);">Submit</a>
</div>
</div>
</form>
JS:
$('#btn').click(function (evt) {
evt.preventDefault();
_this.$Error = [];
this.$email = '';
$('.error--validation').show();
/* Input field */
if ($('#name').val() == '') {
var $nameValidate = $('#name').attr('data-name');
_this.$Error.push($mattaCampaginNameValidate);
$('#name').addClass('has-error');
$('#name').parent().find('.form-title').addClass('has-error');
}
else {
$('#name').removeClass('has-error');
$('#name').parent().find('.form-title').removeClass('has-error');
}
/* Radio field */
if (!$('input[name=Question1]:checked').val()) {
var $Question1 = $('#question-one').attr('data-question--one');
_this.$Error.push($Question1);
$('#question-one').addClass('has-error');
}
else {
$('#question-one').removeClass('has-error');
}
/* Select field */
if ($('#preferredCity').val() == '') {
$('select#preferredCity').parent().find('.selectize-control .selectize-input').addClass('has-error');
$('select#preferredCity').parent().find('.form-title').addClass('has-error');
var $preferredCityValidate = $('#preferredCity').attr('data-preferredcity');
_this.$Error.push($preferredCityValidate);
}
else {
$('select#preferredCity').parent().find('.selectize-control .selectize-input').removeClass('has-error');
$('select#preferredCity').parent().find('.form-title').removeClass('has-error');
}
/* Input type Email field */
if ((!(_this.validateEmail($email))) || $email == '') {
var $emailValidate = $('#email').attr('data-email');
_this.$Error.push($emailValidate);
$('#email').addClass('has-error');
$('#email').parent().find('.form-title').addClass('has-error');
}
else {
$('#email').removeClass('has-error');
$('#email').parent().find('.form-title').removeClass('has-error');
}
$("#validator").text(_this.$Error.join(', '));
if (_this.validateEmail($email) || $("#email").val() != '' || $('#preferredCity').val() != '' || $newsletterTandC) {
if (!($('.preferredCity .selectize-control .selectize-input').hasClass('has-error') || $('.email .form-title').hasClass('has-error') || $('.name .form-title').hasClass('has-error') || $('#question-one').hasClass('has-error') )) {
$('.error--validation').hide();
}
}
});
$('#name')
is used in JavaScript but there is no element with IDname
in the provided HTML Code. Questions containing broken code are off-topic, as the code is not ready for review. – Tushar Mar 8 at 9:05$('#name')
but in the HTML form the ID for the same field isid="matta-camp-fullname"
. @TDG could you please clarify or correct the mismatching IDs? As it is presented, this could couldn't realistically be working correctly. – Phrancis Mar 8 at 9:18