jQuery Ошибка ввода под формой ввода?

Question

Здравствуйте, я только начинаю использовать jQuery, я мог бы использовать руку с проектом.

Мы создаем ассистента по бюджету, где будет около 20 пунктов списка с текстовым полем рядом с каждым элементом. Тогда будет общее число, отображаемое внизу в промежутке.

Я довольно близко отсюда, но я хотел бы, чтобы ошибки отображались чуть ниже каждого ввода текста, а не внизу.

Я уверен, что это возможно, но я не смог понять, как это сделать. Я искал онлайн для исправлений, но пока не повезло

Может кто-нибудь взглянуть и сообщить мне?

Я очень благодарен за помощь!

<div width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> 
<div> 
    <div width="40px">1</div> 
    <div>Butter</div> 
    <div><input class="txt" type="text" name="txt"/></div> 
</div> 
<div> 
    <div>2</div> 
    <div>Cheese</div> 
    <div><input class="txt" type="text" name="txt"/></div> 
</div> 
<div> 
    <div>3</div> 
    <div>Eggs</div> 
    <div><input class="txt" type="text" name="txt"/></div> 
</div> 
<div> 
    <div>4</div> 
    <div>Milk</div> 
    <div><input class="txt" type="text" name="txt"/></div> 
</div> 
<div> 
    <div>5</div> 
    <div>Bread</div> 
    <div><input class="txt" type="text" name="txt"/></div> 
</div> 
<div> 
    <div>6</div> 
    <div>Soap</div> 
    <div><input class="txt" type="text" name="txt"/></div> 
</div> 
<div id="summation"> 
    <div>&nbsp;</div> 
    <div align="right">Sum :</div> 
    <div align="center"><span id="sum">0</span></div> 
</div> 
</div> 



<script> 
$(document).ready(function(){ 

    //iterate through each textboxes and add keyup 
    //handler to trigger sum event 
    $(".txt").each(function() { 

     $(this).keyup(function(){ 
      calculateSum(); 
     }); 
    }); 

}); 

function calculateSum() { 

    var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".txt").each(function() { 

     //add only if the value is number 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 

    }); 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
    $("#sum").html(sum.toFixed(2)); 
} 
</script> 

Answer 1

Я сделал несколько догадок, основанных на том, что вы можете делать. Я решил, что вам нужно только ввести числа, но это могут быть Int или Float. Пример 2 или 4.95. Но при появлении любого другого символа должна появиться ошибка, и расчет не должен выполняться. См рабочий пример: https://jsfiddle.net/Twisty/ocbLfLm2/16/

HTML

<div width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> 
    <div class="itemWrap"> 
    <div>1</div> 
    <label>Butter</label> 
    <input class="txt" type="text" name="txt[]" /> 
    </div> 
    <div class="itemWrap"> 
    <div>2</div> 
    <label>Cheese</label> 
    <input class="txt" type="text" name="txt[]" /> 
    </div> 
    <div class="itemWrap"> 
    <div>3</div> 
    <label>Eggs</label> 
    <input class="txt" type="text" name="txt[]" /> 
    </div> 
    <div class="itemWrap"> 
    <div>4</div> 
    <label>Milk</label> 
    <input class="txt" type="text" name="txt[]" /> 
    </div> 
    <div class="itemWrap"> 
    <div>5</div> 
    <label>Bread</label> 
    <input class="txt" type="text" name="txt[]" /> 
    </div> 
    <div class="itemWrap"> 
    <div>6</div> 
    <label>Soap</label> 
    <input class="txt" type="text" name="txt[]" /> 
    </div> 
    <div id="summation" class="itemWrap"> 
    <div>&nbsp;</div> 
    <label style="text-align: right;">Sum :</label> 
    <div style="width: 50px; text-align: center;"><span id="sum">0.00</span></div> 
    </div> 
</div> 

CSS

.itemWrap { 
    padding: 2px; 
    margin: 2px; 
    border: 1px solid #E8DCFF; 
    width: 170px; 
} 

.itemWrap * { 
    display: inline-block; 
} 

.itemWrap div:first-child { 
    width: 40px; 
    text-align: center; 
} 

.itemWrap label { 
    width: 50px; 
} 

.error { 
    border: 1px solid red; 
} 

.txt { 
    border: default; 
    width: 50px; 
    text-align: center; 
} 

JQuery

$(document).ready(function() { 
    $(".txt").keyup(function(e) { 
    var key = String.fromCharCode(e.which); 
    console.log("Key Code:", e.which, "Key:", key); 
    if (parseInt(key) || e.which == 8 || e.which == 9 || e.which == 190) { 
     $(this).parent(".itemWrap").removeClass("error"); 
     calculateSum(); 
    } else { 
     $(this).parent(".itemWrap").addClass("error"); 
    } 
    }); 
}); 

function calculateSum() { 
    var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".txt").each(function(k, v) { 
    //add only if the value is number 
    if (!isNaN($(v).val()) && $(v).val().length != 0) { 
     sum += parseFloat($(v).val()); 
    } 
    }); 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
    $("#sum").html(sum.toFixed(2)); 
} 

Я внес коррективы в HTML только из-за личных предпочтений и опыта. Например, я добавил CSS. JQuery действительно то, что вам нужно.

Поскольку вы используете onKeyUp, я схватил event, чтобы я мог посмотреть на нажатый ключ. Я конвертирую из charCode в keyStroke (например: 65 -> A). Затем я могу использовать parseInt(), чтобы увидеть, был ли keyStroke буквой или числом. Я также хочу разрешить Tab, Delete и «.», Вы увидите, что они добавлены как в сравнении. Если все условия выполнены, я удаляю класс error, если предыдущая запись сгенерировала ошибку, а затем выполните расчет.

Надеюсь, что это поможет.

Обновлено После Комментарии

https://jsfiddle.net/Twisty/ocbLfLm2/19/

Добавлено следующее:

<div class="itemWrap"> 
    <div>1</div> 
    <label>Butter</label> 
    <input class="txt" type="text" name="txt[]" /> 
    <div class="errorText">Must be a number</div> 
    </div> 

Итак, теперь вы можете добавить текст, который вы любите. и затем вы используете .show() и .hide() по мере необходимости. Я также добавил пространство через height: 2.5em; в CSS.