Vuelidate is not able to validate a Select/Dropdown element?
HTML
<div :class="{ 'form-group--error': $v.subscription.$error }">
<label for="">Year Subscription</label>
<select name="subscription" #change="subscriptionChange()" v-model="$v.subscription.$model" class="custom-select" id="inputGroupSelect04">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS Code
subscription : {required }
Related
I am using Laravel with alpinejs version 3.2.4. I would like to show/hide some input elements and show them based on what the user selects. This is my code:
<form x-data="{payFor: ''}">
<select x-model="payFor" name="payFor">
<option value="service">Service</option>
<option value="product">Product</option>
</select>
<div x-show="payFor == 'service'">
<select name="serviceId">
#foreach($services as $service)
<option value="{{ $service->id }}">{{ $service->service_name }}</option>
#endforeach
</select>
</div>
<div x-show="payFor == 'product'">
<select name="productId">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->product_name }}</option>
#endforeach
</select>
</div>
</form>
This doesn't seem to be working on my forms and I cannot figure out why. When the form loads, all the controls are shown and on selection, none hides. Even when I try to set default x-data="{payFor: 'service'}" it still doesn't work either. Any solution to this?
Not sure if this has any relations so laravel, but this is how you do it in plain html (this would also work in your context):
document.getElementById('payFor').addEventListener("change", function (e) {
if (e.target.value === 'product') {
document.getElementById('services').style.display = 'none';
document.getElementById('products').style.display = 'block';
} else {
document.getElementById('products').style.display = 'none';
document.getElementById('services').style.display = 'block'
}
});
<!DOCTYPE html>
<html>
<body>
<form>
<label for="payFor">Select what to pay for: </label>
<select name="payFor" id="payFor">
<option disabled selected value>-</option>
<option value="service">Service</option>
<option value="product">Product</option>
</select>
<div style="display: none;" id="services">
<select name="serviceId">
<option disabled selected value>-</option>
<option value="service1">service 1</option>
<option value="service2">service 2</option>
</select>
</div>
<div style="display: none;" id="products">
<select name="productId">
<option disabled selected value>-</option>
<option value="product1">product 1</option>
<option value="product2">product 2</option>
</select>
</div>
</form>
</body>
</html>
Just add the selectors to your div, and add this script to get the job done.
I figured another way out. Since I am using livewire, I had to use #if... #else...#endif statement in the HTML class attribute to toggle the divs using show or hide tailwind classes.
I have two independent dropdowns in a form. Below is the code:
<form v-on:submit.prevent="submitForm">
<div>
<label for="tenant">Tenant</label>
<select
class="form-select"
name=""
id="tenant_id"
v-model="formValues.tenant_id" >
<option disabled value="">Select Tenant</option>
<option value="" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
</select>
</div>
<div>
<label for="chart_type">Type</label>
<select
class="form-select"
name=""
id="chartOf"
v-model="formValues.chartOf"
>
<option disabled value="">Type</option>
<option value="diagnosis">Diagnosis</option>
<option value="symptom">Symptom</option>
<option value="comorbidity">Comorbidity</option>
</select>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Method for submitting form :
submitForm(){
console.log('Form values: ', this.formValues)
}
When I select Tenant(1st dropdown), it's fine But when I select 2nd dropdown, the first dropdown resets to the default position(Select Tenant).
I am not able to understand what's happening, as I started learning vue few days ago.
The option value should be bound to field like id :
<option :value="tenant.id" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
I'm trying to set one of the options that is in an IEnumerable as diasabled within the Razor page. The reason for wanting it to be in the list but disabled is that the database will hold the StatusId but I need the user to choose one of the other options but for the database Status to be selected when the page loads.
This is the Razor syntax I'm using and it's populating the list as expected.
<div class="form-group col-md-6">
<label asp-for="#Model.Status" class="control-label"></label>
<select class="form-control" asp-for="#Model.Status" asp-items="#(new SelectList(Model.Statuses, "StatusId", "Description"))">
<option disabled>Select Status</option>
</select>
<span asp-validation-for="#Model.Status"></span>
What I am looking to do is have an item (it's got an StatusId of 0) set as disabled. How can this be achieved in code?
I would like the resulting HTML to look something like this
<div class="form-group col-md-6">
<label class="control-label" for="Description">Description</label>
<select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
<option disabled>Select Status</option>
<option value="1">Status 1</option>
<option value="5">Status 2</option>
<option value="99">Status 3</option>
<option disabled selected="selected" value="0">Not Selectable Status</option>
</select>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
Is this achievable?
Thanks
You can try with foreach loop to build the options. I exactly don't know the property names so I took Disabled, Value, Text (you can modify as per your model)
PS: correct if there are any syntax errors
<div class="form-group col-md-6">
<label class="control-label" for="Description">Description</label>
<select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
<option disabled>Select Status</option>
#foreach(var s in Model.Statuses)
{
if (s.Disabled)
{
<option disabled value="#s.Value">#s.Text</option>
}
else
{
<option value="#s.Value">#s.Text</option>
}
}
</select>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
I need to figure out how to order by date ascending and how I can add search to my list.
Here is example structure: https://jsfiddle.net/franso/jr7dsef3/
<div id="app">
<input type="text" v-model="search" placeholder="Search">
<select v-model="title">
<option value="Show all">Show all</option>
<option value="Title 1">Title 1</option>
<option value="Title 2">title 2</option>
</select>
<select v-model="name">
<option value="Show all">Show all</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
<div class="list" v-for="post in filteredAndOrdered">
<div class="list__wrapper">
<div class="list__item">{{ post.title }}</div>
<div class="list__item">{{ post.name }}</div>
<div class="list__item">{{ post.FinalApplicationDate }}</div>
</div>
</div>
</div>
You can use array.sort() for sorting date and use #change function on input tag for using search
Sort Javascript Object Array By Date
I created a product that requires custom fields. I went through the tutorial and I have them working on the product page.
Working Fields on Product Page
Not working fields on Featured Product
So there are two sessions. Product-customizable-template (this is what this code is on). When i create a product I have to select this template to be used.
The one used for the home page is a feature. feature-product.liquid. It clearly doesn't import any setting created on the product template.
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
{% comment %}
Custom Information
{% endcomment %}
<div>
<div class="row">
<div class="four columns alpha">
<label for="groom_name">Groom's First Name</label>
<input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
</div>
<div>
<label for="four_name">Bride's First Name</label>
<input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
</div>
</div>
<label for="last_name">Last Name</label>
<input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
<label for="wedding_date">Wedding Date</label>
<input required type="date" name="wedding_date">
<label for="city">City</label>
<input required type="text" id="city" name="properties[City]" placeholder="City">
<label for="state">State</label>
<input required list="state" name="state">
<datalist id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</datalist>
</div>
What am I missing?
What you want to do is make the fields required inputs (see the steps in "Make customization form fields required") in that tutorial. Then the customers will have to go to the Product page to add the item to their cart.