CODEWITHSUNDEEP
asp.net-mvc-2drop-down-menuvalidation
Jimmy Collins
Jimmy Collins

Reputation: 3304

ASP.NET MVC - DropDownList Validation Problem

I've got two DropDownLists in a form on a page that contain the same values (a list of languages). I want to ensure that the user doesn't select the same value in each of the drop downs.

I've tried using JavaScript to ensure the selected values aren't the same, it works fine but the form submits anyway.

What's the best way to accomplish this?

Here's the code from my View:

    <script type="text/javascript">

    function CheckLanguageDDL() 
    {
        var form = document.getElementById("form0");

        var sourceLangIndex = form.SourceLanguage.selectedIndex;
        var targetLangIndex = form.TargetLanguage.selectedIndex;
        var strSourceLanguage = form.SourceLanguage.options[sourceLangIndex].text;
        var strTargetLanguage = form.TargetLanguage.options[targetLangIndex].text;

        if (strSourceLanguage == strTargetLanguage) 
        {
            alert("Source Language and Target Language must be different!");
            return;

        }
    }

</script>

    <% Html.BeginForm("Index", "Translate", FormMethod.Post, new { enctype = "multipart/form-data" }); %>

    <fieldset>
    <legend>Request</legend>

    <br />
    <div class="editor-label">
        <%: Html.LabelFor(m => m.SourceLanguage) %>:
     </div>
    <div class="editor-field">
        <%: Html.DropDownList("SourceLanguage", (IEnumerable<SelectListItem>)ViewData["SourceLanguages"]) %>
        <%: Html.ValidationMessageFor(m => m.SourceLanguage) %>
    </div>

    <br />
    <div class="editor-label">
        <%: Html.LabelFor(m => m.TargetLanguage) %>:
     </div>
    <div class="editor-field">
        <%: Html.DropDownList("TargetLanguage", (IEnumerable<SelectListItem>)ViewData["TargetLanguages"]) %>
        <%: Html.ValidationMessageFor(m => m.TargetLanguage) %>
    </div>

    <input type="submit" value="Submit Request" onclick="CheckLanguageDDL();" />
    </p>
    </fieldset>

Thanks.

Upvotes: 0

Views: 701

Answers (1)

Oded
Oded

Reputation: 498904

Make the function return a true/false value that the form submit use that return value 

function CheckLanguageDDL() 
{
    var form = document.getElementById("form0");

    var sourceLangIndex = form.SourceLanguage.selectedIndex;
    var targetLangIndex = form.TargetLanguage.selectedIndex;
    var strSourceLanguage = form.SourceLanguage.options[sourceLangIndex].text;
    var strTargetLanguage = form.TargetLanguage.options[targetLangIndex].text;

    if (strSourceLanguage == strTargetLanguage) 
    {
        return false;
    }

    return true;
}

And on the button:

onclick="return CheckLanguageDDL();"

Upvotes: 1

Related Questions