Как отобразить сообщение рядом с соответствующим вводом в HTML-таблице? - PullRequest
Новая
       7

Как отобразить сообщение рядом с соответствующим вводом в HTML-таблице?

0 голосов
/ 12 января 2019

Я создал таблицу внутри формы, и один столбец состоит из элементов ввода. Я написал функцию JavaScript для проверки каждого ввода. Если значение недействительно, соответствующее сообщение об ошибке должно отображаться рядом с соответствующим вводом. В моем случае для любого входа сообщение об ошибке всегда отображается рядом с первым входом.

Я пытался использовать теги <div> и <span> с соответствующими значениями идентификатора. Для каждого неверного ввода сообщение об ошибке отображается рядом с первым входом, а не с соответствующим входом.

HTML таблица 

<table>
    <tr>
        <td>S.No</td>
        <td>Particulars</td>
        <td>Amount</td>
        <td></td>
    </tr>

    <tr>
        <td>01</td>
        <td>Annual Rent (Only of residential unit not owned by employer)</td>
        <td><input type="number" name="ann_rent"><div id="ar_invalid"></div></td>
    </tr>

    <tr>
        <td>02</td>
        <td>Mediclaim (U/s. 80D of I.T. Act)</td>
        <td><input type="number" name="medi"><div id="medi_invalid"></div></td>
    </tr>

    <tr>
         <td>03</td>
         <td>Interest paid for Home Loan</td>
         <td><input type="number" name="home_int"><div id="home_invalid"></div></td>                        
    </tr>


     <tr>
          <td>04</td>
          <td>National Pension</td>
          <td><input type="number" name="nat_pen"><div id="pen_invalid"></div></td>                   
     </tr>
</table>

Функция Javascript 

function validate() {
var a,b,c,d;
a = document.getElementsByName("ann_rent")[0].value;
b = document.getElementsByName("medi")[0].value;
c = document.getElementsByName("home_int")[0].value;
d = document.getElementsByName("nat_pen")[0].value;
if(!a || a < 0) {
    document.getElementById("ar_invalid").innerHTML = text;          
    return false;
}

if(!b || b < 0) {
    document.getElementById("medi_invalid").innerHTML = text;
    return false;
}

if(!c || c < 0) {
    document.getElementById("home_invalid").innerHTML = text;
    return false;
}

if(!d || d < 0) {
    document.getElementById("pen_invalid").innerHTML = text;
    return false;
}
}

Таблица внутри этой формы 

<form action="process_form.php" method="post" onSubmit="return validate();">

CSS 

td, th {
    text-align: left;
    padding: 8px;
}

table {
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: arial, sans-serif;
    width: 100%;
}

Если пользователь вводит отрицательное значение в input name = "home_int", то сообщение об ошибке должно отображаться рядом с input home_int. Но на самом деле, сообщение об ошибке отображается рядом с input name = "ann_rent". Такая ситуация возникает для каждого входа.

Ответы [ 3 ]

0 голосов
/ 12 января 2019

Если у вас есть кнопка для подтверждения формы, которая выглядит примерно так: 

    <input type="submit" name="s" value="ds"/>

Что происходит, когда ваша функция попадает внутрь первой, если она затем возвращает false, и форма не будет отправлена, поэтому другие ifs не будут выполнять никаких действий в этой ситуации, поэтому, когда вы вводите любое отрицательное число в первом if, другие ifs в они положительны или отрицательны, не работают, и код выполнит сообщение в первом div

но это будет работать и покажет сообщение в нужном div, если вы положите только отрицательное число в определенное текстовое поле и все до того будет положительным

0 голосов
/ 12 января 2019

Измените div "errors" на аналогичные, как показано ниже, чтобы вы могли получить более простой код JavaScript:

HTML: 

<form action="/" method="post" onSubmit="return validate();">
<table>
    <tr>
        <td>S.No</td>
        <td>Particulars</td>
        <td>Amount</td>
        <td></td>
    </tr>

    <tr>
        <td>01</td>
        <td>Annual Rent (Only of residential unit not owned by employer)</td>
        <td><input type="number" name="ann_rent"><div id="ann_rent_invalid"></div></td>
    </tr>

    <tr>
        <td>02</td>
        <td>Mediclaim (U/s. 80D of I.T. Act)</td>
        <td><input type="number" name="medi"><div id="medi_invalid"></div></td>
    </tr>

    <tr>
         <td>03</td>
         <td>Interest paid for Home Loan</td>
         <td><input type="number" name="home_int"><div id="home_int_invalid"></div></td>                        
    </tr>


     <tr>
          <td>04</td>
          <td>National Pension</td>
          <td><input type="number" name="nat_pen"><div id="nat_pen_invalid"></div></td>                   
     </tr>
  </table>
  <input type="submit" value="Submit">
</form>

и в JavaScript: 


function validate() {
  var text = "error";
  var required = ["ann_rent", "medi", "home_int", "nat_pen"];
  var errors = 0;

  required.forEach(function(element) {
    var toselect = element + "_invalid";
    var reqV = document.getElementsByName(element)[0].value;
    if(!reqV || reqV < 0) {
      document.getElementById(toselect).innerHTML = text;
      errors++;
    } else {
      document.getElementById(toselect).innerHTML = null; 
    }
  });

  if(errors > 0){
     return false;
  }
}
0 голосов
/ 12 января 2019

используйте th для заголовков. Добавить новый тд для сообщения об ошибке 

    <table>
            <tr>
                <th>S.No</th>
                <th>Particulars</th>
                <th>Amount</th>
                <th></th>
            </tr>

            <tr>
                <td>01</td>
                <td>Annual Rent (Only of residential unit not owned by employer)</td>
                <td><input type="number" name="ann_rent"></td>
                <td><div id="ar_invalid"></div></td>
            </tr>
    </table>

CSS 

table td, table th {
  padding: 20px;
  border-spacing: 10px;
}

table {
  border-collapse: collapse;
}
...