2
\$\begingroup\$

Is there any way to make that code shorter? I still want to use jQuery. I don't want to use any validation script.

$("#form").submit(function (e) {
   var tmp = $('#select-1').val();
   var tmp1 = $('#select-2').val();
   var tmp2 = $('#select-3').val();
   var error = $('#error-1');
   var error2 = $('#error-2');
   var error3 = $('#error-3');
if (tmp == '0' || tmp == 'Select') {
  e.preventDefault();
  error.show();
} else {
  error.hide();
}
if (tmp1 == '0' || tmp1 == 'Select') {
  e.preventDefault();
  error2.show();
} else {
  error2.hide();
}
if (tmp2 == '0' || tmp2 == 'Select') {
 e.preventDefault();
 error3.show();
} else {
error3.hide();
}
});
});

HTML

<form action="" id="form">
    <div>

        <label for="select-1">Value 1</label>
        <select id="select-1">
            <option value="0">Select</option>
            <option value="1">Select 1</option>
            <option value="2">Select 2</option>
            <option value="3">Select 3</option>
        </select>
        <i id="error-1" class="error">Error</i>
    </div>
     <div>

        <label for="select-2">Value 2</label>
        <select id="select-2">
            <option value="0">Select</option>
            <option value="1">Select 1</option>
            <option value="2">Select 2</option>
            <option value="3">Select 3</option>
        </select>
         <i  id="error-2" class="error">Error</i>
    </div>
     <div>

        <label for="select-3">Value 3</label>
        <select id="select-3">
            <option value="0">Select</option>
            <option value="1">Select 1</option>
            <option value="2">Select 2</option>
            <option value="3">Select 3</option>
        </select>
         <i  id="error-3" class="error">Error</i>
    </div>
    <div> <button type="submit" id="formsubmission">Submit</button></div>
</form>
\$\endgroup\$

2 Answers 2

1
\$\begingroup\$

your html has pattern, so it might be easier if you do this way.

(function ($) {
 $.fn.xSelect = function (e) {
        return this.each(function () {
            var $this = $(this);
              if ($this.val() === '0') {
                e.preventDefault();
                $this.next(".error").show();
            }else{
                $this.next(".error").hide();
            }
        });
  };
})(jQuery);

then use like

$("#form").submit(function (e) {

    $("#select-1,#select-2,#select-3").xSelect(e);

}); 

notice one thing: the event "e" need to pass in xSelect to make preventDefault work.

for the better design. the parameter of jQuery plugin should be a JSON object,so you can make more options. this just give you idea how it's done.

please check my jsfiddle example: jsfiddle

\$\endgroup\$
3
\$\begingroup\$

You could hide the errors to begin with (just put style="display: none;" on them), then you don't have to hide them in your script. Also you can group your variable declarations:

$("#form").submit(function (e) {
    var tmp = $('#select-1').val(),
        tmp1 = $('#select-2').val(),
        tmp2 = $('#select-3').val(),
        error = $('#error-1'),
        error2 = $('#error-2'),
        error3 = $('#error-3');
    if (tmp == '0' || tmp == 'Select') {
        e.preventDefault();
        error.show();
    }
    if (tmp1 == '0' || tmp1 == 'Select') {
        e.preventDefault();
        error2.show();
    }
    if (tmp2 == '0' || tmp2 == 'Select') {
        e.preventDefault();
        error3.show();
    }
});

If you want to shorten it even further, you can just check for "falsy" values:

$("#form").submit(function (e) {
    var tmp = $('#select-1').val(),
        tmp1 = $('#select-2').val(),
        tmp2 = $('#select-3').val(),
        error = $('#error-1'),
        error2 = $('#error-2'),
        error3 = $('#error-3');
    if (!tmp) {
        e.preventDefault();
        error.show();
    }
    if (!tmp1) {
        e.preventDefault();
        error2.show();
    }
    if (!tmp2) {
        e.preventDefault();
        error3.show();
    }
});

Finally, if you can combine your error messages:

$("#form").submit(function (e) {
    var tmp = $('#select-1').val(),
        tmp1 = $('#select-2').val(),
        tmp2 = $('#select-3').val(),
        error = $('#error-1');
    if (!tmp || !tmp1 || !tmp2) {
        e.preventDefault();
        error.show();
    }
});

Actually, the variables aren't necessary at all if you are just checking for nulls:

$("#form").submit(function (e) {
    if (!$('#select-1').val() || !$('#select-2').val() || !$('#select-3').val()) {
        e.preventDefault();
        $('#error-1').show();
    }
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.