Prevent Duplicate Number Input
### Steps:
1. Attach an event listener to all the number input fields (e.g., `change` or `input` event).
2. On each change, check the value of the current input field against the values of the other input fields.
3. If a duplicate is found, reset the current input field and alert the user.
### Example Code:
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('.unique-number').on('input', function () {
const currentValue = $(this).val(); // Get the current input value
let isDuplicate = false;
$('.unique-number').not(this).each(function () {
if ($(this).val() === currentValue) {
isDuplicate = true;
return false; // Exit the loop early if duplicate is found
}
});
if (isDuplicate) {
alert('This number is already entered in another field!');
$(this).val(''); // Clear the duplicate value
}
});
});
</script>### Explanation:
1. **Event Listener**: The `.on('input')` event triggers whenever the user types or changes the input.
2. **Duplicate Check**: The `.not(this)` excludes the current input field from comparison to avoid false positives.
3. **Alert & Clear**: If a duplicate is found, an alert notifies the user, and the input value is cleared using `$(this).val('')`.
### Notes:
– You can replace the `alert` with a more user-friendly method like displaying an inline message or applying a red border to indicate an error.
– If the input fields are dynamically generated, ensure the event listener handles newly added fields by using event delegation (e.g., `.on('input', '.unique-number', function () { … })`).
### Example Code:
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// Store the previous value when an input field gains focus
$('.unique-number').on('focus', function () {
$(this).data('prev-value', $(this).val());
});
// Check for duplicates on input
$('.unique-number').on('input', function () {
const currentValue = $(this).val();
let isDuplicate = false;
$('.unique-number').not(this).each(function () {
if ($(this).val() === currentValue) {
isDuplicate = true;
return false; // Exit the loop early if duplicate is found
}
});
if (isDuplicate) {
alert('This number is already entered in another field!');
// Revert to the previous value
$(this).val($(this).data('prev-value'));
}
});
});
</script>### How It Works:
1. **Storing the Previous Value**:
– On the `focus` event, the previous value of the input field is stored in a custom data attribute (`data-prev-value`).
2. **Checking for Duplicates**:
– On the `input` event, the new value is checked against all other input fields to detect duplicates.
3. **Reverting the Value**:
– If a duplicate is found, the `val()` of the input is reverted to the stored previous value using `$(this).data('prev-value')`.
### Benefits:
– The input field retains its old value instead of being cleared.
– Users get instant feedback and can try entering a new value.
You can adapt this approach for more complex validation scenarios if needed!
### Code Implementation:
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// Store the previous value when an input field gains focus
$('.unique-number').on('focus', function () {
$(this).data('prev-value', $(this).val());
});
// Check for duplicates on input
$('.unique-number').on('input', function () {
const $currentField = $(this); // Current field
const currentValue = $currentField.val();
let isDuplicate = false;
$('.unique-number').not($currentField).each(function () {
if ($(this).val() === currentValue) {
isDuplicate = true;
return false; // Exit the loop early if duplicate is found
}
});
if (isDuplicate) {
alert('This number is already entered in another field!');
// Revert to the previous value
$currentField.val($currentField.data('prev-value'));
}
});
});
</script>### Key Adjustments:
1. **Excluding the Current Field**:
– The `.not($currentField)` ensures that the current field is not included in the duplicate check, preventing false positives.
2. **Efficient Variable Usage**:
– The `$currentField` variable holds the current field's jQuery object, avoiding redundant DOM lookups.
3. **Behavior**:
– On `focus`, the previous value is stored in `data-prev-value`.
– On `input`, duplicates are checked across all other fields, and if a duplicate is found, the current field's value is reverted to the stored value.
### Advantages:
– The field being edited is not checked for duplicates against itself.
– Provides a smooth user experience by restoring the previous value only when necessary.
This setup prevents unnecessary rejections while maintaining data integrity across fields!
### Updated Code
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<input type="number" class="unique-number" placeholder="Enter a number" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// Store the previous value when an input field gains focus
$('.unique-number').on('focus', function () {
$(this).data('prev-value', $(this).val());
});
// Check for duplicates on input
$('.unique-number').on('input', function () {
const $currentField = $(this); // Current field
const currentValue = $currentField.val();
// Only proceed if the value is not empty
if (currentValue === '') return;
let isDuplicate = false;
// Check other fields for duplicate values
$('.unique-number').each(function () {
if (this !== $currentField[0] && $(this).val() === currentValue) {
isDuplicate = true;
return false; // Exit the loop early
}
});
if (isDuplicate) {
alert('This number is already entered in another field!');
// Revert to the previous value
$currentField.val($currentField.data('prev-value'));
}
});
});
</script>### Explanation
1. **Focus Event**:
– When the user focuses on a field, its current value is stored in the `data-prev-value` attribute.
2. **Duplicate Check**:
– On every `input`, the script iterates through all fields using `.each()`.
– The `this !== $currentField[0]` condition ensures that the current field is excluded from the duplicate check.
3. **Revert Value**:
– If a duplicate is found in another field, the script alerts the user and restores the field to its previous value.
4. **Skip Empty Values**:
– The condition `if (currentValue === '') return;` ensures that empty fields are ignored during the check.
### Behavior
– Users can input numbers without interference unless the same number exists in another field.
– If a duplicate is detected, the field reverts to its previous value.
This approach cleanly skips checking the current field against itself while maintaining a seamless user experience.