0

I'm building a website based on wordpress and I put there a form which uses jQuery. However, I'm starting to understand jquery just now, so i am not feeling very well while working with it yet. I have two questions.

First One: Regarding this form, is it necessary to validade the form at both client and server side? Or only at server-side (php) is enough?

Second Question: The form have some fields, which can be duplicated if I click on a button. For this, I'm using the following code:

Jquery Code:

(function($){

 $countForms = 1;

      $.fn.addForms = function(idform){

                    var myform = "<table>"+
                     "  <tr>"+
                     "     <td>Field A ("+$countForms+"):</td>"+
                     "     <td><input type='text' name='fielda["+$countForms+"]'></td>"+
                     "     <td>Field B ("+$countForms+"):</td>"+
                     "     <td><textarea name='fieldb["+$countForms+"]'></textarea></td>"+
                     "     <td><button>remove</button></td>"+
                     "  </tr>"+
                     "</table>";



                    if(idform=='mybutton'){
                        alert(idform);
                        myform = $("<div>"+myform+"</div>");
                        $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
                        $(this).append(myform);
                        $countForms++;
                    }

      };
})(jQuery);         



$(function(){
    $("#mybutton").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;

        if($countForms<3){
            $("#container").addForms(idform);
        }       
    });
});

Html:

<div id="container"><div>
<form method="post" name="b" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='dadoA'></td>
        <td>Field B</td>
        <td><textarea name="dadoB"></textarea></td>
        <td><button>remove</button></td>
    </tr>
</table>
</div>
</div>
<button id="mybutton">add form</button>

<div align="center">
<p><input type="submit" value="Registar" name="registar"></p>
</div>

I know how to use php to validate these fields. What I don't know is how to validate when I duplicate them.
I mean, I have this form with 2 fields, I duplicate them and suppose user fills this new (third) field with a wrong/unaccepted value.
After clicking "Submit", how can I use PHP to validate input, refresh the page, echo the 2 original fields and the duplicate ones(which user duplicated), all with their respective inputs filled by user and with the error message?

DavChana
  • 1,944
  • 17
  • 34
user1511579
  • 1,517
  • 6
  • 26
  • 42

3 Answers3

1

Ideally, from a UX perspective you should try to validate client-side and then double check that server side. It's pretty annoying to submit a form only to find out there's something wrong. Showing errors / problems prior to submit is always a plus.

Chief Alchemist
  • 634
  • 2
  • 7
  • 19
  • So you suggest jquery plus php is that it? – user1511579 Jul 11 '12 at 19:16
  • I was going to answer, but this one is just about exactly what I was going to say. Validation isn't necessarily required. But, I don't believe it to be sane to process form data without server side validation. Client side validation should only be used to improve the user experience. – Steve Buzonas Jul 11 '12 at 20:05
  • Yes, jquery will do. I've used this plugin a few times. http://bassistance.de/jquery-plugins/jquery-plugin-validation/ I'm sure there are others. Sounds like you have the PHP aspect covered so I won't address that. – Chief Alchemist Jul 12 '12 at 00:12
  • Thank you for the suggestions. Now i'm having a problem with php validation: http://stackoverflow.com/questions/11441981/jquery-function-conflicts-with-php-form (if you could hand me a help i would appreciate) after that i will think about jquery validation. – user1511579 Jul 12 '12 at 09:28
0

This may not be exactly what you are looking for, but you can simplify validation by using this: Live Validation

This is a javascript validation script. I like it, its lite, fast, and is pretty easy to use. There is full documentation on how to use it and it is all run client side.

Community
  • 1
  • 1
Matt Hintzke
  • 7,744
  • 16
  • 55
  • 113
0

I feel the first question is answered well in Chief Alchemist's Answer. To answer the second question, your form with variable fields should post as an array. When you process and validate the form data you should iterate over each array entry.

Community
  • 1
  • 1
Steve Buzonas
  • 5,300
  • 1
  • 33
  • 55
  • ok, then i guess i will try to validate with php first, the dificult part will be mantain the arrays, then i will think about client side, will take a look at live validation for that. – user1511579 Jul 11 '12 at 20:35
  • can you give me a link to show how to treat the array in the $_Post? normally i would use: $name = $_POST['name']; but with an array ... – user1511579 Jul 11 '12 at 20:49
  • http://stackoverflow.com/questions/2433727/submitting-a-multidimensional-array-via-post-with-php answers a question about submitting a form as an array and processing it. – Steve Buzonas Jul 12 '12 at 13:14
  • Thank you, atually yesterday looking for an answer myself i found that post. Anyway, now i'm with a bigger problem that i can't find an answer on the internet neither here: http://stackoverflow.com/questions/11441981/jquery-function-conflicts-with-php-form My $_POST doesn't caught the values of the inputs generated by jquery. Can you give me a help please? I can't move on because of this i'm going crazy. – user1511579 Jul 12 '12 at 13:25
  • wrong link, it was this one i wanted to refer: http://stackoverflow.com/questions/11449890/retrieve-data-from-jquery-to-php-before-refresh – user1511579 Jul 12 '12 at 14:01