javascript - jquery表单验证未触发/工作

Question

我需要做一个非常基本的表单验证，我选择的方法是 jQuery。但是，由于某种原因，验证功能似乎根本没有被触发。

看了几个小时后，我无法找出问题所在。

HTML：

<form id="form1" name="form1" method="post" action="process.php">
    <table width="100%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="160">Meno:</td>
        <td><input type="text" name="meno" id="meno" /></td>
        <td width="160">Priezvisko:</td>
        <td><input type="text" name="priezvisko" id="priezvisko" /></td>
      </tr>
      <tr>
        <td width="160">Názov spolocnosti: <br />
          <span class="register_comment">(nevyplnajte ak nie ste podnikatel)</span></td>
        <td><input type="text" name="spolocnost" id="spolocnost" /></td>
        <td width="160">Krajina:</td>
        <td><select name="krajina" id="krajina">
          <option value="" selected="selected">&nbsp;</option>
          <option value="cz">Ceská republika</option>
          <option value="sk">Slovenská republika</option>
        </select></td>
      </tr>
      <tr>
        <td width="160">Adresa:</td>
        <td><input type="text" name="adresa" id="adresa" /></td>
        <td width="160">Mesto:</td>
        <td><input type="text" name="mesto" id="mesto" /></td>
      </tr>
      <tr>
        <td width="160">Email:<br />
          <span class="register_comment">(na tento email Vám príde potvrdenie)</span></td>
        <td><input type="text" name="email" id="email" /></td>
        <td width="160">Telefonický kontakt:<br />
          <span class="register_comment">(uvádzajte kontakt na mobilný telefón na ktorom budete zastihnutelní najmä 10.10.!)</span></td>
        <td><input type="text" name="telefon" id="telefon" /></td>
      </tr>
      <tr>
        <td width="160">Miesto nástupu: </td>
        <td colspan="3"><select name="nastup" id="nastup">
          <option value="" selected="selected">&nbsp;</option>
          <option value="nr">Nitra</option>
          <option value="ba">Bratislava</option>
          <option value="br">Brno - Avion Shopping Park, Škandinávská 128/2</option>
          <option value="ph">Praha - Avion Shopping Park, Škandinávská 15/A</option>
          <option value="pl">Plzen - OC Olympia, Písecká 972/1</option>
        </select></td>
      </tr>
      <tr>
        <td colspan="4"><p>
          <label>
            <input type="checkbox" name="suhlas" value="checkbox" id="suhlas" />
            Oboznámil som sa s podmienkami úcasti a Súhlasím s podmienkami úcasti  </label>
          FLEX Polishing Camp<br />
        </p></td>
      </tr>
      <tr>
        <td colspan="4" align="center"><input type="submit" id="button" value="Odoslat záväznú prihlášku na FLEX Polishing Camp" style="width:500px;" /></td>
      </tr>
      <tr>
        <td colspan="4" class="register_comment">xxxx</td>
      </tr>
    </table>
</form>

jQuery：

<script>  
    $("#form1").submit(function() {
      var errors = new array();
      if ($('input[name=meno]').val() == "") {
        errors.push('Meno je povinná položka.');
      }
      if ($('input[name=priezvisko]').val() == "") {
        errors.push('Priezvisko je povinná položka.');
      }
      if ($('input[name=krajina]').val() == "") {
        errors.push('Je nutné vybrať si krajinu - ČR alebo SR.');
      }
      if ($('input[name=adresa]').val() == "") {
        errors.push('Adresa je povinná položka.');
      }
      if ($('input[name=mesto]').val() == "") {
        errors.push('Mesto je povinná položka.');
      }
      if ($('input[name=email]').val() == "") {
        errors.push('Email je povinná položka.');
      }
      if ($('input[name=telefon]').val() == "") {
        errors.push('Telefonický kontakt je povinná položka.');
      }
      if ($('input[name=nastup]').val() == "") {
        errors.push('Telefonický kontakt je povinná položka.');
      }
      if (!$('#suhlas').attr('checked')) {
        errors.push('Je potrebné vysloviť súhlas s podmienkami zaškrtnutím tlačítka "Oboznámil som sa s podmienkami účasti a Súhlasím s podmienkami účasti FLEX Polishing Camp".');
      }
      if ( errors.lenght > 0 )
      {
        var text;
        for (var i = 0; i < errors.length; i++) {
            text = text + errors[i] + '\n';
        };
        alert(text);
        return false;
      }
      return true;
    });
</script>  

Answer 1

$("form1") 应该是 $("#form1")

Answer 2

First $("form1")  should be $("#form1")

//第二

 text = text + arr[i] + '\n';

//应该

 text = text + errors[i] + '\n';   OR   text += errors[i] + '\n'; 

看起来更新后的代码再次出现错字。这可能会阻止它

if ( errors.lenght > 0 )    // Supposed to be  errors.length

Answer 3

正如其他提到的那样，您错过了#ID 选择器，您还可以使用map方法并缩小代码。

$("#form1").submit(function() {
      var errors = [];
      errors = $('input[type=text]', this).filter(function(){
            return $.trim(this.value) == "";
      }).map(function() {
            return this.name + ' je povinná položka.';
      }).get();

      if (errors.length) {
           var text = errors.join('\n');
           alert(text);
           return false;
      }
});

http://jsfiddle.net/bwVWQ/

Answer 4

您缺少#选择器上的标志，#form1

$("#form1").submit(function() {