如何使用jQuery验证3个选择元素？

Question

I'm trying to validate 3 select fields on my form, my application is a score keeping application for hockey, and I am recording scoring plays. A is the goal scorer, B is the primary assist, and C is the secondary assist. I have the following validation rules:

1. A must not be empty
2. B cannot equal A or C
3. C cannot equal A or B
4. If B is empty, C must be empty

So in other words, A, AB, or ABC are valid combinations, but all must be unique. I am disabling the submit button by applying the disabled bootstrap class/html attribute to the submit button.

In my actual code, A = awayGoal, B = awayPAssist, C = awaySAssist

I currently have the following jQuery code:

var awayGoal = $("#awayGoal");
var awayPAssist = $("#awayPAssist");
var awaySAssist = $("#awaySAssist");
var awayGSubmit = $("#submitAwayScore");

$('#awayScore select').change(function() {
if(awayGoal.val() != "" && awayPAssist.val() != awayGoal.val() && awayGoal.val() != awaySAssist.val()) {
    if(awayPAssist.val() != "" && awaySAssist.val() != "") {
        awayGSubmit.disableButton();
    }
    awayGSubmit.clearDisabled();
}
else {
    awayGSubmit.disableButton();
}
});

This allows unique A + C combinations to pass through, however, A + C that are the same do not pass through. Each select element has the numbers of the players involved in the game loaded in to them. There is also the first option which is a static option, called N/A, the code for that is: <option value="">N/A</option> this allows the admin to have empty primary and secondary assists if they do not exist.

Any help would be greatly appreciated, and any way to make it more efficient is very welcome as well as I am just starting out with jQuery. Thanks in advance.

Answer 1

Since you only have three cases and only three items you can brute force check for each condition and then OR them together to determine the button's disabled status.

JSBin example

var awayGoal = $("#awayGoal");
var awayPAssist = $("#awayPAssist");
var awaySAssist = $("#awaySAssist");
var awayGSubmit = $("#submitAwayScore");


$('#awayScore select').change(function() {
  var A = awayGoal.val();
  var B = awayPAssist.val();
  var C = awaySAssist.val();
  console.log(A,B,C);

  if(// case 1: only A 
     (A !== "" && B === "" && C === "") ||  

     // case 2: only A and B, A != B
     (A !== "" && B !== "" && C === "" && A !== B) || 

     // case 3: A, B, C, all unique
     (A !== "" && B !== "" && C !== "" && A !== B && A !== C && B !== C) ) { 

  //awayGSubmit.clearDisabled();
  console.log("enable button");
}
else {
    //awayGSubmit.disableButton();
    console.log("disable button");
}
});

Answer 2

Im currently develop the system that have so many rule for validation. I try validate using jquery that I build on my own, but so many thing I have to think and a lot of code to write.

I suggest you to try using this jquery validation engine . You can check The Demo page here It have so many features and the most interesting part is you can define your own rule or validation. Have a try.

Good luck.