How to have no validation when selecting a value on dropdown

[mldardy]

On this form it defaults to a committee type when first landing on page. When I select another committee type the form validates for all of the blank fields that are required. I don’t want the form to do this. I am trying to figure out a way so those fields don’t validate when I select another committee type in the dropdown in the javascript.

<form method="post>
<div class="form-group col-md-8">
    <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-summary"></div>
</div>

<input id="link-id" asp-for="@Model.LinkId" type="hidden" />
<input name="FetchCategories" type="hidden"/>
<div class="form-group col-md-8 col-lg-4">
    <div class="form-group">
        @{
            var authorizedCommitteeTypes = await Model.CommitteeType
                .ToSelectListAsync(AuthorizationService, User, AuthRequirements.AdminCommitteeType);

            if (authorizedCommitteeTypes.Count == 1)
            {
                <input id="committeeType" name="committeeType" type="hidden" value="@authorizedCommitteeTypes.FirstOrDefault()?.Value" />
            }
            else
            {
                <label class="control-label">Committee Type</label>
                <select id="add-edit-committee-type"
                        name="committeeType"
                        asp-for="@Model.CommitteeType"
                        asp-items="@authorizedCommitteeTypes"
                        class="form-control">
                </select>
            }
        }
    </div>
</div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Category</label>
    @{
        if (Model != null && Model.AvailableCategories != null)
        {
            var availableCategories =
                new SelectList(
                    Model.AvailableCategories.OrderBy(c => c.Order),
                    dataValueField: "CategoryId",
                    dataTextField: "Title",
                    selectedValue: Model.CategoryId);

            <select id="dropdown-linkCategories" required
                    asp-for="@Model.CategoryId"
                    asp-items="@availableCategories"
                    class="form-control">
                <option>-- Select --</option>
            </select>
        }
        else
        {
            <select id="dropdown-linkCategories"
                    class="form-control">
                <option>-- Select --</option>
            </select>
        }
    }
</div>


<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="title" asp-for="Title" name="Title" class="form-control" />
</div>

<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Display Order</label>
    <div>
        <input id="order" asp-for="Order" name="Order" class="form-control" />
    </div>
</div>

<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">URL</label>
    <input id="url" asp-for="URL" name="URL" class="form-control" />
</div>

<div class="form-group col-md-8 col-lg-12">
    <label class="control-label">Description</label>
    <textarea class="rtextDescription" name="Description" id="Description" row="1" cols="60"
              data-val-maxlength-max="200" asp-for="Description"
              data-val-maxlength="Max length for Description is 200"></textarea>
</div>

    @{

        if (Model.LinkId == 0)
        {
            <div class="form-group col-md-12">
                <input type="submit" id="link-submit"
                       class="btn btn-forum col-sm-12 col-md-2 col-lg-2"
                       value="Add" />
                <a asp-area="Admin"
                   asp-controller="Link"
                   asp-action="Index"
                   class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
            </div>
        }
        else
        {
            <div class="form-group col-md-8 col-lg-12">
                <input type="submit" value="Save" id="edit-submit"
                       class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />

                <a asp-area="Admin"
                   asp-controller="Link"
                   asp-action="Index"
                   class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
  </div>
        }
    }
</form

Javascript

$(document).on("change", "#form-create-link #add-edit-committee-type", function () {
    $('input[name="FetchCategories"]').val(true);  
    $(this).closest('form').submit()
});

[m3g4p0p]

Hi @mldardy , you mean the built in form validation by the browser? this can be achieved by adding a novalidate attribute to the form:

<form method="POST" id="my-form" novalidate>
  ...
</form>

Or using JS (note the camel case):

var form = document.getElementById('my-form')

form.noValidate = true
form.submit()

[mldardy]

Hi m3,

I still want the form to validate but I don’t want it to do it when I select to change to another committee type on the committee type dropdown. When I do that now it validates for the entire form which I don’t want it to do that. Does that make sense?

[m3g4p0p]

@mldardy

I still want the form to validate but I don’t want it to do it when I select to change to another committee type on the committee type dropdown.

Then you might check for the current value inside a change event listener of that select, and disable form validation if that value differs from the initial one:

var typeSelect = document.getElementById('add-edit-committee-type')
var defaultValue = typeSelect.value

typeSelect.addEventListener('change', function () {
  // Disable form validation if another option has been selected
  typeSelect.form.noValidate = typeSelect.value !== defaultValue
})

[mldardy]

@m3g4p0p

Then you might check for the current value inside a change event listener of that select, and disable form validation if that value differs from the initial one:

var typeSelect = document.getElementById('add-edit-committee-type')
var defaultValue = typeSelect.value

typeSelect.addEventListener('change', function () {
  // Disable form validation if another option has been selected
  typeSelect.form.noValidate = typeSelect.value !== defaultValue
})

I get a 'Cannot read property ‘value’ of null when I inspect the javascript in the browser on this
line.

var defaultValue = typeSelect.value

Is there some syntax I need at the end of that line or something else that is missing?

Also when I try to debug the javascript it doesn’t even step into/over the javascript. Just seems like something is missing. Do I need to add html to the form?

[m3g4p0p]

@mldardy

I get a 'Cannot read property ‘value’ of null when I inspect the javascript in the browser on this
line.

This likely means that the DOM content has not been loaded yet when the JS is getting executed; you either need to put the script at the end of the document (right before the closing </body> tag), or wrap it in an appropriate event listener. Where did you put your original code?

@mldardy

Also when I try to debug the javascript it doesn’t even step into/over the javascript. Just seems like something is missing. Do I need to add html to the form?

Huh… but that it generates an error message would certainly suggest that it does run. Where exactly did you put the breakpoint?

PS: Here’s a fiddle to demonstrate it’s working.

[mldardy]

@m3g4p0p

This likely means that the DOM content has not been loaded yet when the JS is getting executed; you either need to put the script at the end of the document (right before the closing </body> tag), or wrap it in an appropriate event listener. Where did you put your original code?

I put the code in a js file. I don’t have a on this form so I did try to put it in a tag after the form and that didn’t work either

<form method="post>
<div ...</div>
</form>
<script> 
var typeSelect = document.getElementById('add-edit-committee-type')
var defaultValue = typeSelect.value

typeSelect.addEventListener('change', function () {
  // Disable form validation if another option has been selected
  typeSelect.form.noValidate = typeSelect.value !== defaultValue
})
</script>

@m3g4p0p

Huh… but that it generates an error message would certainly suggest that it does run. Where exactly did you put the breakpoint?

I put my breakpoint on this line:

var typeSelect = document.getElementById('add-edit-committee-type')

[m3g4p0p]

Hm I don’t see an immediate issue… perhaps the element in question does not exist at all. Could you provide the full HTML, so that I can reproduce the issue? Please no backend code though, just the rendered markup (or is there another FE library at play to add the element dynamically?).

[mldardy]

Here is the full html

<div class="row">
    <div class="col-md-7 order-md-8">
        <input asp-for="LinkId" type="hidden" />
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-info"></h2>
                <hr />
                <div class="row">
                    <div class="col-md-12">                        
      <form id="form-create-link"  method="post">
                           <div class="form-group col-md-8">
    <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation- 
                     summary"></div>
</div>

<input id="link-id"  type="hidden" />
<input name="FetchCategories" type="hidden"/>
<div class="form-group col-md-8 col-lg-4">
    <div class="form-group">
        
                <label class="control-label">Committee Type</label>
                <select id="add-edit-committee-type"                       
                        class="form-control">
                </select>           
    </div>
</div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Category</label>

            <select id="dropdown-linkCategories" required                   
                    class="form-control">
                <option>-- Select --</option>
            </select>      
</div>


<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="title" name="Title" class="form-control" />
</div>

<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Display Order</label>
    <div>
        <input id="order"  name="Order" class="form-control" />
    </div>
</div>

<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">URL</label>
    <input id="url"  name="URL" class="form-control" />
</div>

<div class="form-group col-md-8 col-lg-12">
    <label class="control-label">Description</label>
    <textarea class="rtextDescription" name="Description" id="Description" row="1" cols="60"
              data-val-maxlength-max="200" asp-for="Description"
              data-val-maxlength="Max length for Description is 200"></textarea>
</div>

 
            <div class="form-group col-md-12">
                <input type="submit" id="link-submit"
                       class="btn btn-forum col-sm-12 col-md-2 col-lg-2"
                       value="Add" />
                <a class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
            </div>
        
            <div class="form-group col-md-8 col-lg-12">
                <input type="submit" value="Save" id="edit-submit"
                       class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />

                <a class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
            </div>       
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

[m3g4p0p]

@mldardy

Here is the full html

I’m not familiar with ASP.NET but this looks like razor syntax… no backend code please, just the final HTML as served to the client.

Forum Posting Basics

Strip out PHP (and other backend code) when asking front end questions! If you need help manipulating or styling the HTML generated by a PHP script, for example, include the HTML itself, not the PHP that generates it. E.g. If you want help attaching behaviour to any blockquote elements with a class of “current”, don’t post this: <?php $pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'password'); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->exec('SET NAME…

[mldardy]

Hi I stripped out all of the razor and conditions. Please let me know if that is what you need. If not I’ll fix it to your liking.

[m3g4p0p]

I actually meant the full HTML as served to the client… i.e. open the page in your browser, right click and select “View page source”; this is what your JS will eventually run against. Anyway I just copy / pasted the script below the form, added some options to the #add-edit-committee-type element and it’s working fine; note though that the markup is not well-formed, for instance you have 2 closing </form> tags.

[mldardy]

So how did you get it to work and can you share what you did to get to work? Specifically the javascript.

Edit: Or maybe you still working on it?

[m3g4p0p]

I just put the script below the form as you did in reply #7 really… but here you go:

<form id="form-create-link" method="post">
  <div class="form-group col-md-8">
    <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-
          summary"></div>
  </div>

  <input id="link-id" type="hidden" />
  <input name="FetchCategories" type="hidden" />
  <div class="form-group col-md-8 col-lg-4">
    <div class="form-group">

      <label class="control-label">Committee Type</label>
      <select id="add-edit-committee-type" class="form-control">
        <option value="foo">foo</option>
        <option value="bar">bar</option>
        <option value="baz">baz</option>
      </select>
    </div>
  </div>
  <div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Category</label>

    <select id="dropdown-linkCategories" required class="form-control">
      <option>-- Select --</option>
    </select>
  </div>


  <div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="title" name="Title" class="form-control" />
  </div>

  <div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Display Order</label>
    <div>
      <input id="order" name="Order" class="form-control" />
    </div>
  </div>

  <div class="form-group col-md-8 col-lg-4">
    <label class="control-label">URL</label>
    <input id="url" name="URL" class="form-control" />
  </div>

  <div class="form-group col-md-8 col-lg-12">
    <label class="control-label">Description</label>
    <textarea class="rtextDescription" name="Description" id="Description" row="1" cols="60"
      data-val-maxlength-max="200" asp-for="Description"
      data-val-maxlength="Max length for Description is 200"></textarea>
  </div>


  <div class="form-group col-md-12">
    <input type="submit" id="link-submit" class="btn btn-forum col-sm-12 col-md-2 col-lg-2" value="Add" />
    <a class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
  </div>

  <div class="form-group col-md-8 col-lg-12">
    <input type="submit" value="Save" id="edit-submit" class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />

    <a class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
  </div>
</form>

<script>
  var typeSelect = document.getElementById('add-edit-committee-type')
  var defaultValue = typeSelect.value

  typeSelect.addEventListener('change', function () {
    // Disable form validation if another option has been selected
    typeSelect.form.noValidate = typeSelect.value !== defaultValue
  })
</script>