Click here to Skip to main content
15,891,372 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am currently trying to make an asp.net input field required via javascript but I cannot seem to make it work.

What I have tried:

<div class="row commentType">
        <div class="form-group col col-lg-3">
            <br/>
            <label>Select comment type</label>
            <br />
            <br />
            <select class="form-control bg-secondary text-light " aria-label="Default select example" name="selectcommentType" onchange="handleSelectChange(event)">
                <option value="1">Generic</option>
                <option value="2">Account Details</option>
                <option value="3">Order</option>
                <option value="4">Shipping details/option>
                <option value="5">other</option>

            </select>
        </div>
    </div>
<div class="row" id="ChangePassword" style="display:none;">
        <br />
        <br />
        <div class="form-group col col-lg-3">
            <label>Method for Password Change</label>
            <br />
            <br />
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="changePasswordMethod" id="changePasswordMethod2" onclick="passwordChangeMethod(2)" checked>
            <label class="form-check-label" for="changePasswordMethod2">
                By email
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="changePasswordMethod" id="changePasswordMethod1" onclick="passwordChangeMethod(1)">
            <label class="form-check-label" for="changePasswordMethod1">
                By post
            </label>
        </div>
        <br />
        <br />
    </div>

<div class="row" id="ChangePasswordViaEmail" style="display:none;">
        <br />
        <br />
        <div class="form-group col col-lg-3">
            <label>Email for password change</label> @Html.TextBoxFor(model => model.newEmail, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter respondent's email here...", @type = "email", id = "Email1"} })
        </div>
        <br />
        <br />
    </div>


Javascript Code here :

<script>
 function handleSelectChange(event) {

            var selectElement = event.target;
            var value = selectElement.value;
            if (value == 2) {
                document.getElementById('ChangePassword').style.display = 'block';

                document.getElementById('ChangePasswordViaEmail').style.display = 'block';
                document.getElementById('ChangePasswordViaPost').style.display = 'none';

            }
            }


        function passwordChangeMethod(val) {

            if (val == 1) {
                document.getElementById('ChangePasswordViaEmail').style.display = 'none';
                document.getElementById('ChangePasswordViaPost').style.display = "block";
            }
            else if (val == 2) {
                document.getElementById('ChangePasswordViaPost').style.display = 'none';
                document.getElementById('ChangePasswordViaEmail').style.display = 'block';
                document.getElementById('Email1').required = "required";
            }

    </script>
Posted
Comments
Richard Deeming 2-Sep-22 4:43am    
The attribute needs to be set to "required"; the property (which you're using here) needs to be set to true or false.

Besides that, you haven't explained what the problem is. Are you getting an error message? Is your code not running? Is the element not found?

Don't forget, if you're using jQuery validation / unobtrusive validation, you'll need to update that explicitly; it won't automatically pick up changes to the validation attributes on the input element.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900