Проверка сгенерированного JSON выпадающего списка с помощью jQuery Validate plugin

Question

Попытка проверки выпадающего списка с помощью jQuery Validate. Данные формы генерируются с использованием JSON. Я могу добавить «обязательный» для ввода полей, но кажется, что это невозможно сделать с раскрывающимся списком. Ниже есть то, что у меня есть, и оно, похоже, не работает.

Есть ли способ добавить действие, чтобы убедиться, что пользователь выбирает параметр?

JSON:

[ 
    { 
     "caption": "Starting Calander Options", 
     "name": "overlay2", 
     "type": "select", 
     "id": "calander", 
     "options": { 
      "": "none", 
      "calendar13": "January 2015", 
      "calendar14": "February 2015", 
      "calendar15": "March 2015", 
      "calendar16": "April 2015", 
      "calendar17": "May 2015", 
      "calendar18": "June 2015", 
      "calendar19": "July 2015", 
      "calendar20": "August 2015", 
      "calendar21": "September 2015", 
      "calendar22": "October 2015", 
      "calendar23": "November 2015", 
      "calendar24": "December 2015" 
     } 
    }, 
] 

Jquery:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> 

<script type="text/javascript"> 
    var jqnew = jQuery.noConflict(); 

    jqnew("#stringForm").validate({ 
     messages: { 
      calander: { 
       required: "Please select an option from the list, if none are appropriate please select 'Other'", 
      }, 
     } 
    }); 
</script> 

HTML:

<div class="leftArea"> 
    <form id="stringForm"> 
     <input type="hidden" value="" name="id" id="id"/> 
     <input type="hidden" id="new-profile" name="newprofile" value="yes"/> 
     <input type="hidden" id="text-name" name="text_name" value=""/> 
    </form> 

    <?php //echo $this->getChildHtml("customization_radio") ?> 
    <?php echo $this->getChild("customization_radio") -> setProduct($product)->toHtml() ?> 
</div> 

Также как примечание, я на рамках Magento 7

Answer 1

EDIT: Как-то я пропустил ссылку «Проверка jQuery» в исходном вопросе. Я продолжу и оставлю свой ответ, хотя в качестве подхода к проверке для людей, ищущих простую проверку jQuery (или гибкую для любого подхода), и поиск этого вопроса.

---

Проверка JQuery, что вы хотите сделать, это простая проверка значения в раскрывающемся меню, с помощью метода .val().

Если вы хотите, чтобы убедиться, что пользователь выбрал значение, проверьте, чтобы убедиться, что текущее значение выпадающего списка не равно значение опции по умолчанию (то есть, значение, установленное "": "none",):

if ($("#DROPDOWN_ID_VAL").val() !== "") { 
    // logic for when it passes validation 
} 
else { 
    // logic for when it DOES NOT pass validation 
} 

Answer 2

Ваш JSON ...

"caption": "Starting Calander Options", 
"name": "overlay2", 
"type": "select", 
"id": "calander", 
"options": { 
    "": "none", 
    "calendar13": "January 2015", 
    .... 
} 

Ваш JQuery ...

jqnew("#stringForm").validate({ 
    messages: { 
     calander: { 
      required: "Please select an option from the list, if none are appropriate please select 'Other'", 
     }, 
    } 
}); 

У вас есть две важные проблемы здесь, которые мешают валидации required от работы ...

1. Правила проверки могут быть объявлены только в пределах .validate() метода с помощью атрибута name, а не id. Вы используете calander в рамках метода .validate(), но согласно вашему JSON, calander является id вашего select. В рамках этого метода вы должны использовать overlay2, который, как вам кажется, определен как name вашего select. (FWIW, вы также неправильно «календарь», как «каландр» для вашего id.)

2. Вы не заявили о каких-либо правил в пределах .validate(). Правила объявляются с помощью опции rules, а пользовательские сообщения объявляются с помощью опции messages. Вы не можете объявить правило в пределах messages и наоборот.

В противном случае, до тех пор, как первая option в вашем select содержит value="", которые у вас уже есть, то required правило будет работать, как ожидалось.

Вы должны также заключить код jQuery в обработчик событий DOM ready, чтобы гарантировать, что HTML полностью сконструирован до вызова метода.

Рабочий код:

<script type="text/javascript"> 
    jQuery(document).ready(function(jqnew) { // ensure DOM is ready 

     jqnew("#stringForm").validate({ 
      rules: {   // <- declare your rules 
       overlay2: { // <- the NAME attribute 
        required: true 
       } 
      }, 
      messages: {  // <- define your custom messages 
       overlay2: { // <- the NAME attribute 
        required: "Please select an option from the list, if none are appropriate please select 'Other'" 
       } 
      } 
     }); 

    }); 
</script> 

DEMO: http://jsfiddle.net/4195L9e8/