I have jQuery Validation setup for a two-step form, and the form is validating as expected with errors under each input and select menu from the first screen to the second screen with the submit button.
However, when I enable the Semantic-UI Dropdown Module to style my select menus in the form, the select menu styles as expected, but is no longer showing an error even if marked as required.
Here's the initial markup:
<form id="signup" action="" method="post" name="signup">
<!-- Step 1 Screen -->
<div class="step-1-view">
<span class="step">Step 1 of 2</span>
<div class="name">
<input type="text" name="firstname" id="firstname" placeholder="First Name">
<input type="text" name="lastname" id="lastname" placeholder="Last Name">
</div>
<div class="email">
<input type="text" name="email" id="email" placeholder="Email">
</div>
<div class="specialty">
<select name="specialty" class="ui dropdown" id="specialty">
<option value="" disabled selected>Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
</div>
<div class="buttons-wrap">
<a class="clear" href="#">Clear</a>
<a class="next" href="#">Next</a>
</div>
</div>
<!-- / Step 1 Screen -->
<!-- Step 2 Screen -->
<div class="step-2-view">
<span class="step">Step 2 of 2</span>
<div class="zip">
<input type="text" name="zip" id="zip" placeholder="Zip Code">
</div>
<div class="role">
<select name="role" class="ui dropdown" id="role">
<option value="" disabled selected>Role</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
</div>
<div class="buttons-wrap">
<a class="back" href="#">Back</a>
<button class="send">Send</button>
</div>
<label id="success" class="success">Thank you for signing up!</label>
</div>
<!-- / Step 2 Screen -->
</form>
In the browser, Semantic-UI modifies the markup for a the select/dropdown:
<div class="specialty">
<div class="ui dropdown selection" tabindex="0">
<select name="specialty" id="specialty">
<option value="" disabled="" selected="">Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<i class="dropdown icon"></i>
<div class="default text">Choose Specialty</div>
<div class="menu" tabindex="-1">
<div class="item" data-value="1">Option 1</div>
<div class="item" data-value="1">Option 2</div>
<div class="item" data-value="1">Option 3</div>
<div class="item" data-value="1">Option 4</div>
<div class="item" data-value="1">Option 5</div>
</div>
</div>
Here are the rules in my form validation script:
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
//email: true
validate_email: true // Custom, from new method
},
specialty: {
required: true
},
role: {
required: true
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
}
"Specialty" and "Role" from the select menus are being called, but not working when Semantic-UI is enabled.
Error labels attaching to "Name" and "Email" non-Semantic-UI elements (from the browser):
<div class="name">
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="error">
<label id="firstname-error" class="error" for="firstname">Please enter your first name</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name" class="error">
<label id="lastname-error" class="error" for="lastname">Please enter your last name</label>
</div>
<div class="email">
<input type="text" name="email" id="email" placeholder="Email" class="error">
<label id="email-error" class="error" for="email">Please provide a valid email address</label>
</div>
<div class="specialty">
<div class="ui dropdown selection" tabindex="0">
<select name="specialty" id="specialty">
<option value="" disabled="" selected="">Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<i class="dropdown icon"></i>
<div class="default text">Choose Specialty</div>
<div class="menu" tabindex="-1">
<div class="item" data-value="1">Option 1</div>
<div class="item" data-value="1">Option 2</div>
<div class="item" data-value="1">Option 3</div>
<div class="item" data-value="1">Option 4</div>
<div class="item" data-value="1">Option 5</div>
</div>
</div>
</div>
Error labels attaching to all with Semantic-UI library disabled (from the browser):
<div class="name">
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="error">
<label id="firstname-error" class="error" for="firstname">Please enter your first name</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name" class="error">
<label id="lastname-error" class="error" for="lastname">Please enter your last name</label>
</div>
<div class="email">
<input type="text" name="email" id="email" placeholder="Email" class="error">
<label id="email-error" class="error" for="email">Please provide a valid email address</label>
</div>
<div class="specialty">
<select name="specialty" class="ui dropdown error" id="specialty">
<option value="" disabled="" selected="">Choose Specialty</option>
<option value="1">Option 1</option>
<option value="1">Option 2</option>
<option value="1">Option 3</option>
<option value="1">Option 4</option>
<option value="1">Option 5</option>
</select>
<label id="specialty-error" class="error" for="specialty">Please select a specialty</label>
</div>
I do need Semantic-UI for Select Element styling, and am aware that Semantic UI has it's own Validator - but am stuck with jQuery Validation for this project.
Any ideas as to how to get the two libraries to play nicely together?
