2

I've tried to send my form without input[submit] but its not working properly.

Tutorial Address : Link

I have used jquery validation plugin.

I put image button instead of input[submit]. And its not working. I want to assing my image to the validate function than send function.

Some advices?

Here is the code

form

<form id="kullaniciKayit" action="" method="post" novalidate>

            <input type="hidden" name="islem" value="uyeKayit">
            <input type="hidden" name="fbId" value="<?php echo $fidd ?>">

                <ul>
                    <li><input type="textbox" class="selector" style="background:transparent;" name="objAd" value="<?=$adSoyad?>" disabled></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objEposta" value="<?=$eposta?>" disabled></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objDtarih" placeholder="Gün/Ay/Yıl" ></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objAdres"></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objTel"></li>
                </ul>


            <div class="form-gonder">
                <a class="formGonderBtn" href="" target="_parent"><img src="../img/post-btn.png"></a>
            </div>

        </form>

jquery

<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.3.js"></script> 
<script type="text/javascript" src="../js/jquery.validate.js"></script>

validation code

 <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#kullaniciKayit").validate({

        // Specify the validation rules
        rules: {
            objAdres: "required",
        },

        // Specify the validation error messages
        messages: {
            objAdres: "Lutfen Adres Giriniz",
        },

        submitHandler: function(form) {
            form.submit();
        }
    });


  });

  </script>
Sparky
  • 98,165
  • 25
  • 199
  • 285
Levent Kaya
  • 49
  • 10

2 Answers2

1

You can achieve it in 2 ways:

Method1 : Just change your HTML to this:

    <form id="kullaniciKayit" action="" method="post" novalidate>

            <input type="hidden" name="islem" value="uyeKayit">
            <input type="hidden" name="fbId" value="<?php echo $fidd ?>">

                <ul>
                    <li><input type="textbox" class="selector" style="background:transparent;" name="objAd" value="<?=$adSoyad?>" disabled></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objEposta" value="<?=$eposta?>" disabled></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objDtarih" placeholder="Gün/Ay/Yıl" ></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objAdres"></li>
                    <li><input type="textbox" class="selector"  style="background:transparent;" name="objTel"></li>
<li><input type="image" src="../img/post-btn.png" name="submit" ></li>
                </ul>

<!-- no need for this
            <div class="form-gonder">
                <a class="formGonderBtn" href="" target="_parent"><img src="../img/post-btn.png"></a>
            </div>
-->

        </form>

Method 2: Replace this html block with the code below:

    <div class="form-gonder">
         <a class="formGonderBtn" href="" target="_parent"><img src="../img/post-btn.png"></a>
     </div>

with:

 <div class="form-gonder">
     <a class="formGonderBtn" href="javascript:void(0);" target="_parent"><img id="submit" src="dd-exit.gif"></a>
  </div>

and add the below code to document ready:

    $('#submit').click(function(){
      $("#register-form").valid();
  });

so final code will be:

    $(function() {

        // Setup form validation on the #register-form element
        $("#kullaniciKayit").validate({

            // Specify the validation rules
            rules: {
                objAdres: "required",
            },

            // Specify the validation error messages
            messages: {
                objAdres: "Lutfen Adres Giriniz",
            },

            submitHandler: function(form) {
                form.submit();
            }
        });

     $('#submit').click(function(){
              $("#register-form").valid();
     });
  });

Let me know if any help needed.

abhiklpm
  • 1,603
  • 2
  • 16
  • 21
  • Thank you so much @abhiklpm.. its working like a charm. but it show the errors below the inputs.. i want to show them to right side each input. how would i do that? for example with ? – Levent Kaya Nov 10 '13 at 21:42
  • ..and its not posting the form. – Levent Kaya Nov 10 '13 at 21:47
  • for showing error add this to your validate method `errorLabelContainer: '#errors'` – abhiklpm Nov 11 '13 at 05:49
  • replace `$("#register-form").valid()` with `if($("#register-form").valid()) $("#register-form").submit();` and see whther form submit works – abhiklpm Nov 11 '13 at 05:50
0

You have set your form to no validate. Delete the novalidate attribute

mkocansey
  • 67
  • 5
  • I took this sample from http://runnable.com/UZJ24Io3XEw2AABU/how-to-validate-forms-in-jquery-for-validation address. And this tag has been there. If i delete this tag its not working at all. – Levent Kaya Nov 10 '13 at 19:13