Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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();
            }
        }
});
share|improve this question

put on hold as unclear what you're asking by Phrancis, Mathias Ettinger, Mast, alecxe, mdfst13 2 days ago

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question.If this question can be reworded to fit the rules in the help center, please edit the question.

1  
$('#name') is used in JavaScript but there is no element with ID name 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
1  
It appears the jQuery selects for ID $('#name') but in the HTML form the ID for the same field is id="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
6  
The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to get the best value out of Code Review - Asking Questions for guidance on writing good question titles. – BCdotWEB Mar 8 at 9:41
1  
Hi... HTML code is updated – TDG Mar 8 at 9:43
1  
In that case, you can also add TypeScript code. – Tushar Mar 8 at 11:16