Проблема с <select> option

188

09 июля 2018, 11:00

Стилизировал <select> в css. Возникла проблема, которая состоит в том, что по умолчанию стоит первый option (там написано "Выберите необходимый пункт"). Но пользователь должен обязательно выбрать какой-то другой, кроме него.

И при отправлении данных на сервер, если пользователь не выбирал других пунктов, отправляются неверные данные (нужно обязательно какой-то из других пунктов).

Как ограничить пользователя, чтобы перед нажатием кнопки отправления данных на сервер, проверялось, выбрал ли он какой-то другой пункт, или оставил тот, что по умолчанию. Пробовал через функцию js - onclick на кнопку отправления , но данные все равно отправляются.

function ValidateSelect(selected) { 
  var kindSelect = selected.value; 
  var valid = false; 
  if (kindSelect == "Выберите алгоритм") { 
    selected.value = ""; 
    return false; 
  } else { 
    return true; 
    break; 
  } 
}

<select class="turnintodropdown" name="algoritm" id="algoritm" required> 
  <option>Выберите алгоритм</option> 
  <option value="AES">AES</option> 
  <option value="Rijndael">Rijndael</option> 
  <option value="TripleDES">TripleDES</option> 
</select> 
<br /> 
<p> 
  <div class="col-md-offset-2 col-md-10"> 
    <input type="submit" value="Зашифровать" onclick="ValidateSelect(algoritm)" class="btn btn-default" /> 
  </div> 
</p>

Answer 1

/***   
Your function is here if you want 
***/ 
var form = document.querySelector('form'); 
 
form.addEventListener('submit', function(e) { 
  e.preventDefault(); 
  //---------------------------------------------------------------- 
  //  
  console.log('Check before sending to Server '); 
})

<!-------- Added form --------> 
<form id="myForm" action="/action_page.php"> 
 
  <select class="turnintodropdown" name="algoritm" id="algoritm" required> 
    <option>Выберите алгоритм</option> 
    <option value="AES">AES</option> 
    <option value="Rijndael">Rijndael</option> 
    <option value="TripleDES">TripleDES</option> 
  </select> 
  <br /> 
  <p> 
    <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Зашифровать" class="btn btn-default" /> 
    </div> 
  </p> 
</form>

UPD:

//---------------------------------------------------------------- 
 
function ValidateSelect(selected) { 
  var kindSelect = selected.value; 
  console.log('Here: ', kindSelect); 
  var valid = false; 
  if (kindSelect == "Выберите алгоритм") { 
    selected.value = ""; 
    return false; 
  } else { 
    return true; 
    //break; // In this case Break is Error 
  } 
} 
//---------------------------------------------------------------- 
 
var form = document.querySelector('form'); 
 
form.addEventListener('submit', function(e) { 
  e.preventDefault(); 
  var sel = document.querySelector('select'); 
  //---------------------------------------------------------------- 
  if( ValidateSelect(sel) ) { /// Вызов вашей фунции если вернула, то что вам надо 
  //---------------------------------------------------------------- 
    // form.submit();  // Отослать на сервер ...  
     console.log('Sending'); 
  } else { 
   // Обработайте ошибки юзера или другая ваша задача.... 
     console.log('Please select'); 
  } 
  console.log('Check before sending to Server '); 
})

<!-------- Added form --------> 
<!---------------------------------------------------------  
             Поменяйте файл action_page.php  
              на тот который на сервере принимает запрос это  
               your-file.asp  
                тот файл куда до этого данные с формы посылали 
------------------------------------------------------------> 
<form id="myForm" action="/action_page.php"> 
 
  <select class="turnintodropdown" name="algoritm" id="algoritm" required> 
    <option>Выберите алгоритм</option> 
    <option value="AES">AES</option> 
    <option value="Rijndael">Rijndael</option> 
    <option value="TripleDES">TripleDES</option> 
  </select> 
  <br /> 
  <p> 
    <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Зашифровать" class="btn btn-default" /> 
    </div> 
  </p> 
</form>