如果选项文本包含“选择”，则选择框验证

Question

If I have a select box, with the text Select (Insert Type of Addon)

For example, with the text "Select Case and Clip" as the default option as well as 5 other select boxes, I want to validate this form only if no select box contains the word "Select" in it.

This is using Virtuemart, and there is no way to make sure the options are selected properly.

My idea, would be to use the method above and find the value Select in an options text, on submission

 <select name="customPrice[0][27]" id="customPrice027">
     <option value="265">Select Case &amp; Clip</option>
     <option value="266">$25.00 - Black - Large - 1</option>
     <option value="267">$0.00 - Black - None - 2</option>
     <option value="268">$10.00 - Beige - Small - 3</option>
     <option value="269">$20.00 - Beige - Large - 4</option>
     <option value="270">$0.00 - Beige - None - 5</option>
     <option value="271">$10.00 - Blue - Small - 6</option>
     <option value="272">$20.00 - Blue - Large - 7</option>
     <option value="273">$0.00 - Blue - None - 8</option>
     <option value="274">$10.00 - Gray - Small - 9</option>
     <option value="275">$20.00 - Gray - Large - A</option>
     <option value="276">$0.00 - Gray - None - B</option>
     <option value="277">$20.00 - Red - Large - R</option>
     <option value="278">$20.00 - Olive Drab - Large - D</option>
 </select>

My issue is that this is dynamically generated, so I cannot validate and have the first option contain a 0 value.

I think using regEx may be the way to go to find the word "Select" in my post.

Apologize if this is stupid (I am a beginner with jQuery).

Here is my code below, trying to just add a console message saying there is a Select box, with text containing "Select"

    $(document).ready(function () {

       if ($("select").indexOf("Select") >= 1) {
          console.log('Select is Selected');
       }       

    });

Any pointers here? I'd also like this to also validate upon submit button press, before allowing it to do so.

Update:

My code is dependent and has to stop the form submission, on selection of the button. I know the ID, Type, Name, Title and Value of the submission button (pre-defined)

This is one out of 6 boxes, all same condition fits and triggers this message.

Here is my code, it isn't stopping on submit. I can send a link in private message if need be for the site example.

     $(document).ready(function () {

       $( ".addtocart-button" ).click(function() {

        if($("option:contains('Select')").length){
           event.preventDefault();
           console.log("Select found");
        }


    });

});

Answer 1

Use the contains selector

$("form").submit(function(e){
    if($("#customPrice027 option:selected:contains('Select')").length){
       e.preventDefault();
       alert("found");
    }
});

JS Fiddle: http://jsfiddle.net/QcEbL/1/

Modified to work with your provided code

$( ".addtocart-button" ).click(function(e) {

    if($("#customPrice027 option:selected:contains('Select')").length){
       e.preventDefault();
       console.log("Select found");
    }
});

JS Fiddle: http://jsfiddle.net/QcEbL/2/

Answer 2

Why use the option text to find a select word in the select box if you can do that using the value

$('#sub').on('click', function() { 
   var selectval = $('#customPrice027').val();
   if(selectval == '265') { 
      alert("Gotcha!");
   }
});

See fiddle

Hope it helps!

Answer 3

Sounds like you would like the user to select something other than the default value, if so check the text of the selected option

var valid = true;

$('select').each(function() {
    if ($('option:selected', this).text().indexOf('Select') != -1) valid = false;
    return valid;
});

FIDDLE