Select validation

Question

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>

Answer 1

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

Answer 2

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();
 }
});