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>

caoglish · Accepted Answer · 2014-02-26 00:07:06Z

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

Big McLargeHuge · Accepted Answer · 2014-02-25 15:57:27Z

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

Stack Exchange Network

Select validation

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Select validation

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions