CODEWITHSUNDEEP
jqueryasp.net-core
Ahmed
Ahmed

Reputation: 47

How to restrict user not to put any white space in specific filed in a asp.net form using Jquery

I have a form where I am grabbing user input using Key value pair. I don't want user to put any empty white spaces in key. So I created an Id="noWhite" and trying to apply a jquery on this id. here is my code

<div class="row">
<div class="col-md-4">
    <form asp-action="Create">
        <div class="form-group">
            <label class="control-label">Device Name:</label>
            <input asp-for="DeviceName" class="form-control" />
            <span asp-validation-for="DeviceName" class="text-danger"></span>
        </div>
        <br />

        <h3>Device Parameters:</h3>
        @for (var i = 0; i < 2; i++)
        {
            <div class="form-group">
                <label class="control-label">Name:</label>
                <input name="DeviceParameters.Parameters[@i].Key" class="form-control" id="noWhite" />
            </div>
            <div class="form-group">
                <label class="control-label">Value:</label>
                <input name="DeviceParameters.Parameters[@i].Value" class="form-control" />
            </div>
        }
        <br />
        <h3>Firmware Gates:</h3>
        @for (var i = 0; i < 2; i++)
        {
            <div class="form-group">
                <label class="control-label">Name:</label>
                <input name="FirmwareGates.Parameters[@i].Key" class="form-control" id="noWhite" />
            </div>
            <div class="form-group">
                <label class="control-label">Value:</label>
                <input name="FirmwareGates.Parameters[@i].Value" class="form-control" />
            </div>
        }

        <br />
        <h3>Modem Include List:</h3>
        @for (var i = 0; i < 2; i++)
        {
            <div class="form-group">
                <label class="control-label">Name:</label>
                <input name="ModemIncludeList.Parameters[@i].Key" class="form-control" id="noWhite" />
            </div>
            <div class="form-group">
                <label class="control-label">Value:</label>
                <input name="ModemIncludeList.Parameters[@i].Value" class="form-control" />
            </div>
        }

        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        $("#noWhite").on("keypress", function (e) {
            if (e.which === 32)
                e.preventDefault();
        });
    </script>
}

But it works only for my first DeviceParameters key (name). Here is a screenshot. enter image description here

I am trying to restrict white spaces in name field of Device Parameters, Firmware Gates and Modem Include List. But My jquery is working for only the first name field but not for all.

How can I restrict user not to put any white spaces in any key(name) field?

Upvotes: 0

Views: 1082

Answers (3)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

It is better to remove white spaces when user enters text:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
        $("#noWhite").on("keyup", function (e) {
            $(this).val($(this).val().toString().replace(" ",""));
        });
});

</script>
<input type="text" id="noWhite">

This also works in mobile device

Upvotes: 0

thisiswildo
thisiswildo

Reputation: 1

The id of a field is unique, and you are duplicating it in the for loop, so thats why it only works on the first input, instead of using an id, try using a class example:

@for (var i = 0; i < 2; i++)
    {
        <div class="form-group">
            <label class="control-label">Name:</label>
            <input name="FirmwareGates.Parameters[@i].Key" class="form-control noWhite" />
        </div>
        <div class="form-group">
            <label class="control-label">Value:</label>
            <input name="FirmwareGates.Parameters[@i].Value" class="form-control" />
        </div>
    }

And the javascript function is:

$(".m-input").on("keypress", function (e) {
        if (e.which === 32)
            e.preventDefault();
    });

Upvotes: 0

Peyu
Peyu

Reputation: 431

I think the problem here could be the multiple Id's with the same name. The id's should be unique. If you need to identify multiple elements you can use classes.

Example:

Instead of: 

<input name="ModemIncludeList.Parameters[@i].Key" class="form-control" id="noWhite" />

just use this:

<input name="ModemIncludeList.Parameters[@i].Key" class="form-control noWhite" />

And then in your jquery, instead $("#noWhite") selector, use this selector $(".noWhite")

Notice that the "#" was replaced by "." . That's beacuse the # look up for Id's and the dot look up for classes. 

$(".noWhite").on("keypress", function (e) {
        if (e.which === 32)
            e.preventDefault();
    });

I hope this help...

Upvotes: 1

Related Questions