Home / Questions / 106863
Accepted
MNibor
Asked: 2020-10-04 07:03:55 +0800 CST 2020-10-04 07:03:55 +0800 CST

Select that I can't validate with javascript in semantic ui

  • 772

I have in a form, three SELECT two of them are multiple and one is a simple select. I am using the semantic ui form validation system. I manage to validate all the fields, but there is only one that does not validate me.

<div class="field">
    <label>País:</label>
    <select id="paisnom" class="ui fluid search dropdown" name="paisnom" required>
         <option value="0"></option>
         <?php
         $conexion = new Conexion();
         $stmt = $conexion -> prepare("SELECT paiscod, paisnom FROM paises ORDER BY paisnom");
         $stmt->execute();

         while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
         if ( $row['paiscod'] == $pais ) { ?>
            <option value = "<?php echo $row['paiscod']?>" selected><?php echo ($row['paisnom'])?></option>
         <?php } else { ?>
             <option value = "<?php echo $row['paiscod']?>"><?php echo ($row['paisnom'])?></option>
         <?php }
         }?>
    </select>
    </div>

that way I load the country select... and then how do I validate it

dropdown3: {
            identifier  : 'paisnom',
            rules: [{
                type   : 'empty',
                prompt : 'Por favor, tiene que elegir un país de residencia'
            }]
        },

so I validate one of the other two select

dropdown2: {
            identifier : 'intereses[]',
            rules: [{
                type   : 'empty',
                prompt : 'Por favor, elija algunos temas de su interés'
            }]
        },

it has the straight brackets at the end because it is a select multiple
that could be happening?
any suggestion?

php

1 Answers

  1. Best Answer

    If you look at the example in the documentation , for the validation to emptywork, the value of the field must be really empty, in this case, it would be <option value=""></option>:

    $('.form')
  .form({
    on: 'blur',
    fields: {
      dropdown: {
        identifier  : 'dropdown',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please select a dropdown value'
          }
        ]
      }
    }
  })
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<form class="ui form">
  <div class="field">
    <label>País</label>
    <select class="ui dropdown" name="dropdown">
      <option value="">Selecciona</option>
      <option value="arg">Argentina</option>
      <option value="col">Colombia</option>
      <option value="mex">Mexico</option>
    </select>
  </div>
  <div class="ui submit button">Enviar</div>
  <div class="ui error message"></div>
</form>

    • 1