BoldDesk®Customer service software with ticketing, live chat & omnichannel support, starting at $99/mo for unlimited agents. Try for free!
Hi
I am trying to do a client side validation on a dropdownlist using the HTMLAttribute tag, but its not kicking in when I click submit button in my editform. Please see code below.
<SfDropDownList FloatLabelType="FloatLabelType.Auto" TValue="string" TItem="LookupModel" Placeholder="Select PoC Country" DataSource="@ddlLookup_PocCountries" HtmlAttributes="@(new Dictionary<string,object>(){{"required", "true" } })" @bind-Value="_model.ClientPoCCountry" >
<DropDownListFieldSettings Value="Value" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>
Please advise?
|
@inject IJSRuntime JS
<body>
<div class="stackblitz-container material">
<div class="control-section col-lg-12">
<div id="local-data" class="col-lg-6" style="padding-top: 15px">
<div class="content">
<form action="" name="registration">
<div>
<SfTextBox HtmlAttributes="@htmlattr1"></SfTextBox>
<span class="error1" style="width:250px;"></span>
</div>
<div>
<SfDropDownList TItem="GameFields" TValue="string" HtmlAttributes="@htmlattr" PopupHeight="230px" Placeholder="Select a game" DataSource="@Games">
<DropDownListEvents TItem="GameFields" TValue="string" ValueChange="OnChange"></DropDownListEvents>
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>
<span class="error2" style="width:250px;"></span>
</div>
<input type="submit" value="submit" />
</form>
</div>
</div>
</div>
</div>
</body>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JS.InvokeAsync<string>("validation");
}
private string textValue { get; set; }
public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<GameFields> Games = new List<GameFields>() {
new GameFields(){ ID= "Game1", Text= "American Football" },
new GameFields(){ ID= "Game2", Text= "Badminton" },
new GameFields(){ ID= "Game3", Text= "Basketball" },
new GameFields(){ ID= "Game4", Text= "Cricket" },
new GameFields(){ ID= "Game5", Text= "Football" },
new GameFields(){ ID= "Game6", Text= "Golf" },
new GameFields(){ ID= "Game7", Text= "Hockey" },
new GameFields(){ ID= "Game8", Text= "Rugby"},
new GameFields(){ ID= "Game9", Text= "Snooker" },
new GameFields(){ ID= "Game10", Text= "Tennis"},
};
public string DropVal = "Game3";
public string ChangeValue { get; set; } = "Basketball";
public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args)
{
this.ChangeValue = args.ItemData.Text;
}
Dictionary<string, object> htmlattr1 = new Dictionary<string, object>() { { "name", "firstname" }, { "id", "firstname" } };
Dictionary<string, object> htmlattr = new Dictionary<string, object>() { { "name", "games" }, { "id", "games" } };
}
|
|
function validation() {
$(function() {
$("form[name='registration']").validate({
rules: {
firstname: "required",
games: "required",
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().siblings()[0]);
},
submitHandler: function (form) {
form.submit();
}
});
});
};
|
