CODEWITHSUNDEEP
jqueryvalidationsemantic-ui
Booshwa
Booshwa

Reputation: 109

Semantic UI Form Validation with Dynamic Dropdowns

I am building a dynamic form that requires dropdowns to be rebuilt and validated. I have found that I can rebuild a dropdown using the "setup menu" option however when I then re-initialize the validation for the form it throws an error that it is empty even when a value is selected.

HTML

<form class="ui form">
  <div class="required field">
    <label for="gender">Dynamic Dropdown</label>
    <select name="dropdown" class="ui dropdown" id="select">
      <option value="">Gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  </div>
  <div class="ui divider"></div>
  <div class="ui submit button">Submit</div>
</form>

JavaScript

function form_init() {
  $(".ui.form").form({
    inline: true,
    on: 'submit',
    fields: {
        dropdown: {
          identifier  : 'dropdown',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter a value'
            }
          ]
        }
    }
  });

  $(".ui.form").find(".ui.dropdown").dropdown();
}

arr = [
    {id: 1, name: "Bob"},
    {id: 2, name: "Barb"}
];
options = [];

for (var i = 0; i < arr.length; i++ ) {
    options.push({
    value: arr[i].id,
    text: arr[i].name,
    name: arr[i].name
  })
}

$("#select").dropdown('setup menu', {values: options});

form_init();

I have built a JsFiddle here https://jsfiddle.net/booshwa/mjuL6tvL/2/

Any help is much appreciated, not sure if this is a bug or I am missing something.

Upvotes: 3

Views: 3134

Answers (1)

Jamie Barker
Jamie Barker

Reputation: 8256

You need to also edit the contents of the select element to match your new data. $("#select").dropdown('setup menu', {values: options}); only replaces the "pseudo" data that Semantic adds for UI purposes.

Adding $('#select').empty(); before your for loop and running $('#select').append($('<option>', {value:arr[i].id, text:arr[i].name})); within it sorts out your issue.

In the below example I also added an empty value field so you can see it works.

https://jsfiddle.net/mjuL6tvL/4/

$(".ui.form").form({
  inline: true,
  on: 'submit',
  fields: {
    dropdown: {
      identifier: 'dropdown',
      rules: [{
        type: 'empty',
        prompt: 'Please enter a value'
      }]
    }
  }
});

arr = [{
    id: '',
    name: "Select Name"
  },
  {
    id: 1,
    name: "Bob"
  },
  {
    id: 2,
    name: "Barb"
  }
];
options = [];

$('#select').empty();
for (var i = 0; i < arr.length; i++) {
  options.push({
    value: arr[i].id,
    text: arr[i].name,
    name: arr[i].name
  })

  $('#select').append($('<option>', {
    value: arr[i].id,
    text: arr[i].name
  }));
}

$("#select").dropdown('setup menu', {
  values: options
});
form {
  margin: 2em;
}
<script src="//code.jquery.com/jquery-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet" />
<form class="ui form">
  <div class="required field">
    <label for="gender">Dynamic Dropdown</label>
    <select name="dropdown" class="ui dropdown" id="select">
      <option value="">Gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  </div>
  <div class="ui divider"></div>
  <div class="ui submit button">Submit</div>
</form>

Upvotes: 3

Related Questions