jQuery проверить. требуется только с определенной опцией

Я хотел бы проверить, есть ли какой-либо текст в настраиваемом поле, но только если выбранная опция выбрана выше. Я очень новичок в HTML (хорошо с C), поэтому, пожалуйста, извините остальные мои ошибки (возможно, многие), но, пожалуйста, укажите их с объяснением :) Я пробовал по другим вопросам, которые люди разместили здесь с очень похожими ситуациями но не добились какого-либо прогресса. Спасибо!jQuery проверить. требуется только с определенной опцией

 <html lang="en"> 
 
     <main> 
 
     <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
    \t 
 
\t \t <h1>D D D S </h1> 
 
\t \t 
 
\t \t <link rel="stylesheet"href="request.css"> 
 
\t \t <script src="jquery.js"></script> 
 
\t \t <script src="jquery.validate.js"></script> 
 
\t \t <script> 
 
\t \t jQuery(function ($) { 
 
\t \t $('#myInput').validate({ 
 
\t \t \t debug: true, 
 
\t \t \t rules: { 
 
     customdrinkfield: { 
 
      required: function (el) { 
 
       return $(el).closest('form').find('.drinkChoice').val() == 'custom'; } } 
 
\t \t \t } 
 
\t \t }); 
 
     }); \t \t \t </script> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t function checkvalue(val) { 
 
\t \t \t var element=document.getElementById('çustomdrinkfield'); 
 
\t \t \t \t if(val=="custom") 
 
\t \t \t \t \t document.getElementById('customdrinkfield').style.display='block'; 
 
\t \t \t \t else 
 
\t \t \t \t \t document.getElementById('customdrinkfield').style.display='none'; 
 
\t \t \t \t } \t \t \t \t 
 
\t \t </script> \t \t 
 
\t \t </head> 
 

 
     <body> 
 
\t 
 
\t  <div class="field"> 
 
\t \t 
 
\t \t <!--name field //--> 
 
\t \t <form class="form-request" action="" method="POST" id="myInput> 
 
\t \t <label for="inputName" class="sr-only"></label> 
 
\t \t <input for="name" name="inputName" value="" id="inputName" class="form-control" placeholder="Name" maxlength="16" required autofocus> 
 
\t 
 
\t  <!--location field //--> 
 
\t \t <br> 
 
\t \t <select name="location" onchange='checkvalue(this.value)' required> 
 
\t \t \t <option value="" disabled selected hidden>Delivery Location</option> 
 
\t \t \t <option value="deck">Deck</option> 
 
\t \t \t <option value="grass">Grass</option> 
 
\t \t \t <option value="poolShallow">Pool shallow</option> 
 
\t \t \t <option value="poolDeep">Pool Deep</option> 
 
\t \t </select> 
 
\t \t 
 
\t \t <!--drink field \t //--> 
 
\t \t <br> 
 
\t \t <select name="drink" id="drinkChoice" onchange='checkvalue(this.value);' required> 
 
\t \t \t <option value="" disabled selected hidden>Drink Choice</option> 
 
\t \t \t <option value="Slushie A">Slushie A</option> 
 
\t \t \t <option value="Sluishie B">Slushie B</option> 
 
\t \t \t <option value="water">Water</option> 
 
\t \t \t <option value="custom">Custom</option> 
 
\t \t </select> 
 

 
\t \t <!--custom field //--> 
 
\t \t <input type="text" name="customdrinkfield" id="customdrinkfield" style='display:none;' placeholder="Custom"/> 
 
\t \t 
 
\t \t </br> 
 
\t \t <!--submit //--> 
 
\t \t <button id="btnRequest" type="submit" formvalidate value="Submit">Request</button> 
 
\t \t </form> 
 
\t  </div> 
 
     </body> 
 
     </main> 
 
     </html>

источник

2016-11-03 dinodc

Вы почти там. Но проблема в том, когда вы пытаетесь найти drinkChoiceselect element вы делаете это с его classname тогда drinkChoice является id дано этому element и вы должны использовать #drinkChoice вместо .drinkChoice. Таким образом, ваш обновленный rule statement должен быть, как показано ниже:

customdrinkfield: { 
    required: function(el) { 
    return $(el).closest('form').find('#drinkChoice').val() == 'custom'; 
            //^^this here 
    } 
}

Here is the DEMO

Несколько ошибок я нашел или лучше сказать ниже, является хорошей практикой:

Держите javascript связанные питания ниже страницы , до конца body. Это улучшает производительность.
Его хорошо иметь только один <script type="text/javascript"> и обернуть весь ваш код js внутри него. Несколько частей не нужны.
Следите за функцией checkvalue. Это не будет работать правильно, если вы идете снизу вверх.

Так вот обновленный html

<html lang="en"> 
    <main> 
     <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
      <h1>D D D S </h1> 
      <link rel="stylesheet"href="request.css"/> 
     </head> 
     <body> 
      <div class="field"> 
       <!--name field //--> 
       <form class="form-request" action="" method="POST" id="myInput> 
        <label for="inputName" class="sr-only"/> 
        <input for="name" name="inputName" value="" id="inputName" class="form-control" placeholder="Name" maxlength="16" required autofocus/> 
        <!--location field //--> 
        <br/> 
        <select name="location" onchange='checkvalue(this.value)' required> 
         <option value="" disabled selected hidden>Delivery Location</option> 
         <option value="deck">Deck</option> 
         <option value="grass">Grass</option> 
         <option value="poolShallow">Pool shallow</option> 
         <option value="poolDeep">Pool Deep</option> 
        </select> 

        <!--drink field //--> 
        <br/> 
        <select name="drink" id="drinkChoice" onchange='checkvalue(this.value);' required> 
         <option value="" disabled selected hidden>Drink Choice</option> 
         <option value="Slushie A">Slushie A</option> 
         <option value="Sluishie B">Slushie B</option> 
         <option value="water">Water</option> 
         <option value="custom">Custom</option> 
        </select> 

        <!--custom field //--> 
        <input type="text" name="customdrinkfield" id="customdrinkfield" style='display:none;' placeholder="Custom"/> 
        <!--submit //--> 
        <button id="btnRequest" type="submit" formvalidate value="Submit">Request</button> 
       </form> 
      </div> 
      <script src="jquery.js"></script> 
      <script src="jquery.validate.js"></script> 
      <script type="text/javascript"> 
       jQuery(function ($) { 
        $('#myInput').validate({ 
         debug: true, 
         rules: { 
          customdrinkfield: { 
           required: function (el) { 
            return $(el).closest('form').find('#drinkChoice').val() == 'custom'; 
           } 
          } 
         } 
        }); 
       });   
       function checkvalue(val) { 
        var element=document.getElementById('çustomdrinkfield'); 
        if(val=="custom") 
         document.getElementById('customdrinkfield').style.display='block'; 
        else 
         document.getElementById('customdrinkfield').style.display='none'; 
       }    
      </script>  
     </body> 
    </main> 
</html>

источник

2016-11-03 04:24:54

большое спасибо за это. Хотя я думаю, что, возможно, я смутился тем, что мне было нужно. В основном мне нужно что-нибудь jQuery, java, чтобы проверить, что что-то набрано в пользовательское поле, если пользователь выбрал выше, а также думаю, что я могу/должен? переключитесь на радиокнопки для выбора напитков. – dinodc

@dinodc Ну, это зависит от того, как вы выбираете дизайн экрана на основе пользовательского опыта .. то есть с помощью «radio» или «select». Кроме того, что работает вышеописанное решение, оно требуется, только если выбрано «custom» .. Если бы вы могли подробно рассказать о том, что вам нужно, или о функциях гораздо глубже, то я мог бы предложить вам подробнее .. –

jQuery проверить. требуется только с определенной опцией

ответ

Смежные вопросы