Search jQuery

jQuery Forum

jquery form validation plugin issue : Please help

in Using jQuery Plugins • 11 months ago

Hi All

I'm new for Jquery, and im try to impliment Jquery Form Validation plugin into a form.

During my testing, I have several question about using form validation plugin

Here is my form code :

<script src="#application.http#jquery/lib/jquery.js" type="text/javascript"></script>
<script src="#application.http#jquery/jquery.validate.js" type="text/javascript"></script>

$.validator.setDefaults({
debug: true,
submitHandler: function() {
$("#btnUpdate").click(function() {
alert("submitHandler:btnUpdate");
if (confirm("Are you sure to Update the Record")){
alert("click Yes");
}else{
alert("click Cancel");
};
});
$("#btnCancel").click(function() {
alert("submitHandler:btnCancel");
});
var f = document.signupForm;
alert("submitHandler:submitted!");
}
});
$().ready(function() { //1-1
$("#btnUpdate").click(function() {
alert("btnUpdate");
$("#signupForm").validate({ //2
rules: {
firstname: {
required: true,
minlength: 5
//remove_show_msg: "firstname"
}
},
messages: {
firstname : "<table bgcolor='F5EFC9' border='1' bordercolor='ffffff'><tr><td><font color='red'><b>Please enter your firstname update 2</b><font></td></tr></table>"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) { //4-1
//Version 2
//alert(element.attr("name"));
jsSetIDName = $('#' + element.attr("name") + '_msg').fadeIn();
error.appendTo(jsSetIDName);
// End Version 2
}//4-1
});//2
});
$("#btnCancel").click(function() {
alert("btnCancel");
$("#show_msg").html("");
var validator2 = $("#signupForm").validate();
validator2.form({
rules: {
comment: {
required: true,
minlength: 5
//remove_show_msg: "firstname"
}
},
messages: {
comment : "<table bgcolor='F5EFC9' border='1' bordercolor='ffffff'><tr><td><font color='red'><b>Please enter your firstname update 2</b><font></td></tr></table>"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) { //4-1
//Version 2
//alert(element.attr("name"));
jsSetIDName = $('#' + element.attr("name") + '_msg').fadeIn();
error.appendTo(jsSetIDName);
// End Version 2
}//4-1
});
});
}); //1-1
</script>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
<p>Default submitHandler is set to display an alert into of submitting the form</p>
<form id="signupForm" method="post" action="">
<fieldset>
<legend>Validating a complete form</legend>
<table border="0" width="700">
<tr>
<td align="right" valign="top" width="200"><label for="firstname">Firstname</label></td>
<td align="left" valign="top" width="400"><input id="firstname" name="firstname" /><br>
<span id="firstname_msg" name="firstname_msg" class="show_msg">test</span>
</td>
</tr>
<tr>
<td align="right" valign="top" width="200"><label for="firstname">Comment</label></td>
<td align="left" valign="top" width="400"><input id="comment" name="comment" /><br>
<span id="comment_msg" name="comment_msg" class="show_msg">test</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="btnUpdate" id="btnUpdate" value="update" size="20">
<input type="submit" name="btnSubmit" id="btnSubmit" value="submit" size="20">
<input type="submit" name="btnCancel" id="btnCancel" value="cancel" size="20">
</td>
</tr>
</table>
</fieldset>
</form>

Below is the result i want to achieved :

I have a form, it have 3 action button :

     a) Update Record.
     b) Submit Record
     c) Cancel Record

a) Update record.
       -- Clear all the error message.
       -- Validated all the form field and update the record,
       -- If validation pass, the form will submit and update the record
Action page : Update Record
If Update successfully :
showed alert message to informed user the form record is updated then redirect to main page.
Else show alert Error message.

b) Submit Record.
-- It will validated all the form field
-- Once validate pass, it will show an alert message : Are you sure you want to submit the record?
-- Yes = Submit the record for process,

-- If Update successfully : show Alert message : "You record xxx is submitted successfully".
-- Else show alert Error message.

-- No = Do nothing.

c) Cancel Record
       -- Clear all the error message.
       -- It will make sure the form field REASON textarea need to be entered only..
       -- Once the validation pass, alert message showed : Are your sure you want to Cancel?
           If yes : Submit form and update the record status to Cancel
                      Show alert message : "Your XXX record is Cancel".
              No : Do nothing.

Issue
1) How to write A and C validation script where by:
       -- A is validate all form field and
       -- C only Comment text is required?

I try to split the [UPDATE] and [Cancel] button validation script into difference block but no luck.
After i click the [Update] button and then click on the [Cancel] button, It seem it only run the [Update] validation script but not [Cancel] validation script.

I try to used below URL sample (If .. Else) but no luck too :
  http://forum.jquery.com/topic/jquery-validate-creditcard-issue

2) How to showe alert message to let user decide the next action by click Yes or No before or after validation?

I try to use below code :

$("#btnUpdate").click(function() {
alert("submitHandler:btnUpdate");
if (confirm("Are you sure to Update the Record")){
alert("click Yes");
}else{
alert("click Cancel");
};
});

It seem it need to click [Update] button x 2 time, then the alert message will showed.

It should show if the validation is pass?

3) To return Alert message when
-- Submit successfully
-- Return error message when form submition false.

I believe this can be done via using return javascript function.
But the way, is that any jquery script i can refer?

4) To used <input type="button">
So far the sample i found via internet is all using <input type="submit">. Is that any sample using input type ="button"> to control the button action?

Thank for all who can help me to solve this issue. Very appreciated.

Regard

Keong

Replies(17)

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi

May i know anyone know how to fixed this issue?

Regard
Keong

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

You have a real mess, hard to know where to start

The initializing of validation plugin should be done before any events, and not inside click handlers.

If you added a hidden field to form that identified your "submit type" you could make the whole thing a lot simpler.
Just check this field value, and apply validation options accordingly when form loads. On server side you can use this value to manage db processing also This would cut down on non user friendly extra buttons and simplify a lot of your coding problems

You can create different sets of options:

var updateOptions={
      rules {// rules for update only},
      messages: {....}
}

var submitOptions={
      //options for submit
}

// use submit type to determine which options to use
var validationOptions, submitType=$('#myHiddenSubmitType').val();
switch( submitType){
      case: 'submit': validationOptions= submitOptions; break;
      case 'update': validationOptions= updateOptions; break;
}
// initialize validation
$('#myForm').validate( validationOptions)

submitHandler- should only be used to handle submit process, not loaded with a bunch of click handlers

You'll need some fine tuning with 3 submit types on one form but with some better organization between server and client code the above should help

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi charlietfl

How can i set the hidden value to [Update], [Cancel] Or [Submit] when i click those button?

eg

   $("#btnCancel").click(function() {
      $("#myHiddenSubmitType").html("Cancel_Process");
   });


// Then follow your code to run the validation?

var validationOptions, submitType=$('#myHiddenSubmitType').val();
switch( submitType){
      case: 'submit': validationOptions= submitOptions; break;
      case 'update': validationOptions= updateOptions; break;
}
// initialize validation
$('#myForm').validate( validationOptions)

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

set the values when you load the form, you are missing the whole point about not using the submit buttons.

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi charlietfl

I try to used you suggestion but it seem not calling the validation rules at all

Below is my code :

<cfoutput>
<script src="#application.http#jquery/lib/jquery.js" type="text/javascript"></script>
<script src="#application.http#jquery/jquery.validate.js" type="text/javascript"></script>
</cfoutput>
<script type="text/javascript">
$.validator.setDefaults({
//debug: true,
submitHandler: function() {
var f = document.signupForm;
var submitType=$('#action_process').val();
if (submitType == 'btnUpdate'){
alert("submitHandler : btnUpdate");
}else if (submitType == 'btnCancel'){
alert("submitHandler : btnCancel");
}else if (submitType == 'btnSubmit'){
alert("submitHandler : btnSubmit");
var f = document.signupForm;
f.action = "test.html";
f.submit();
}else{
return false;
}
//alert("submitHandler:submitted!");
}
});
$().ready(function() { //1-1
var UpdateOptions={
rules: {
firstname: {
required: true,
minlength: 5
//remove_show_msg: "firstname"
}
},
messages: {
firstname : "<table bgcolor='F5EFC9' border='1' bordercolor='ffffff'><tr><td><font color='red'><b>Please enter your firstname update 2</b><font></td></tr></table>"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) { //4-1
//Version 2
//alert(element.attr("name"));
jsSetIDName = $('#' + element.attr("name") + '_msg').fadeIn();
error.appendTo(jsSetIDName);
// End Version 2
}//4-1
}
var CancelOptions={
rules: {
comment: {
required: true,
minlength: 5
//remove_show_msg: "firstname"
}
},
messages: {
comment : "<table bgcolor='F5EFC9' border='1' bordercolor='ffffff'><tr><td><font color='red'><b>Please enter your firstname update 2</b><font></td></tr></table>"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) { //4-1
//Version 2
//alert(element.attr("name"));
jsSetIDName = $('#' + element.attr("name") + '_msg').fadeIn();
error.appendTo(jsSetIDName);
// End Version 2
}//4-1
}
var validationOptions, submitType=$('#action_process').val();
alert("submitType = " + submitType);
switch(submitType){
case 'btnUpdate':
alert("Case : btnUpdate");
validationOptions = "UpdateOptions";
break;
case 'btnCancel':
alert("Case : btnCancel");
validationOptions = "CancelOptions";
break;
default:
alert("Case : Nothing");
validationOptions = "CancelOptions";
break;
}
// initialize validation
$("#signupForm").validate(validationOptions);
}); //1-1
function f_action_process(action_process_value){
var f = document.signupForm;
alert("action_process_value = " + action_process_value);
document.signupForm.action_process.value = action_process_value;
}
</script>
</head>
<body>
<form id="signupForm" name="signupForm" method="post" action="">
<fieldset>
<legend>Validating a complete form</legend>
<table border="0" width="700">
<tr>
<td align="right" valign="top" width="200"><label for="firstname">Firstname</label></td>
<td align="left" valign="top" width="400"><input id="firstname" name="firstname" /><br>
<span id="firstname_msg" name="firstname_msg" class="show_msg">test</span>
</td>
</tr>
<tr>
<td align="right" valign="top" width="200"><label for="firstname">Comment</label></td>
<td align="left" valign="top" width="400"><input id="comment" name="comment" /><br>
<span id="comment_msg" name="comment_msg" class="show_msg">test</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="btnUpdate" id="btnUpdate" value="update" size="20" onclick="f_action_process('btnUpdate')"/>
<input type="submit" name="btnSubmit" id="btnSubmit" value="submit" size="20" onclick="f_action_process('btnSubmit')"/>
<input type="submit" name="btnCancel" id="btnCancel" value="cancel" size="20" onclick="f_action_process('btnCancel')"/>
<input type="hidden" name="action_process" id="action_process" value="" size="20">
</td>
</tr>
</table>
</fieldset>
</form>

The code logic is :

1) When User click any of the button, it will reset the hidden variable

eg when user click [Cancel], the hidden variable will change from empty to btnCancel.

2) The Validation will used the hidden variable value to run the option validation script.

Do you mind to take a look what happen to my code?

Again, thank for your time. Very appreciated it.

Regard

Keong

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

quick scan and I see this:

validationOptions = "UpdateOptions";

remove quotes, this implies validationOptions is a string starting with "U" ending with "s" not the object you defined as a var previously

learn how to use console.log() into browser consoles like Firebug, Chrome etc will help. If you had logged:
console.log( validationOptions) would see that it is the string in quotes, not the object wanted

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi charlietfl

   Thank for your update.

   I just try to removed the quote.. but it seem that the validation is not working base on the button that i click.

   As u said :

     The initializing of validation plugin should be done before any events, and not inside click handlers.

   Is that mean i can't control which block of rule i need to run base on the button that i click?

   Eg
     1) [Submit] button will validate all form field, and
2) [Cancel] button will make sure COMMENT is required. The rest of the form field will ignored.

   How i can make this work??

   Thank for your time and very appreciated it.

Regard
Keong

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

would help to see how your form works, can you post link?

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi Charlietfl

I dont have any link here, but my code can work by adding jquery.js and jquery.validation.js file into a same folder and save my code as xxx.html will do.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
$.validator.setDefaults({

    //debug: true,
    submitHandler: function() {


    var f = document.signupForm;

    var submitType=$('#action_process').val();
    if (submitType == 'btnUpdate'){
      alert("submitHandler : btnUpdate");
    }else if (submitType == 'btnCancel'){
      alert("submitHandler : btnCancel");
    }else if (submitType == 'btnSubmit'){
      alert("submitHandler : btnSubmit");
      var f = document.signupForm;
      f.action = "test.html";
      f.submit();

    }else{

      return false;
    }

    //alert("submitHandler:submitted!");
    }
});

$().ready(function() { //1-1

var UpdateOptions={
       rules: {
               firstname: {
                   required: true,
                   minlength: 5
            //remove_show_msg: "firstname"
               }

           },
           messages: {
              firstname : "<table bgcolor='F5EFC9' border='1' bordercolor='ffffff'><tr><td><font

color='red'><b>Please enter your firstname update 2</b><font></td></tr></table>"
           },

           // the errorPlacement has to take the table layout into account
           errorPlacement: function(error, element) { //4-1
        //Version 2
        //alert(element.attr("name"));
        jsSetIDName = $('#' + element.attr("name") + '_msg').fadeIn();
        error.appendTo(jsSetIDName);
        // End Version 2

           }//4-1

}

var CancelOptions={
      rules: {
               comment: {
                   required: true,
                   minlength: 5
            //remove_show_msg: "firstname"
               }
           },
           messages: {
              comment : "<table bgcolor='F5EFC9' border='1' bordercolor='ffffff'><tr><td><font

color='red'><b>Please enter your firstname update 2</b><font></td></tr></table>"
           },

           // the errorPlacement has to take the table layout into account
           errorPlacement: function(error, element) { //4-1
        //Version 2
        //alert(element.attr("name"));
        jsSetIDName = $('#' + element.attr("name") + '_msg').fadeIn();
        error.appendTo(jsSetIDName);
        // End Version 2

           }//4-1
}

   var validationOptions, submitType=$('#action_process').val();
   alert("submitType = " + submitType);
   switch(submitType){
        case 'btnUpdate':
            alert("Case : btnUpdate");
            validationOptions = UpdateOptions;
            break;

        case 'btnCancel':
            alert("Case : btnCancel");
            validationOptions = CancelOptions;
            break;
        default:
            alert("Case : Nothing");
            validationOptions = UpdateOptions;
            break;
   }

// initialize validation
$("#signupForm").validate(validationOptions);

}); //1-1

function f_action_process(action_process_value){
var f = document.signupForm;
alert("action_process_value = " + action_process_value);
document.signupForm.action_process.value = action_process_value;
}
</script>

</head>
<body>

<form id="signupForm" name="signupForm" method="post" action="">
   <fieldset>

       <legend>Validating a complete form</legend>

           <table border="0" width="700">

        <tr>
          <td align="right" valign="top" width="200"><label for="firstname">Firstname</label></td>
          <td align="left" valign="top" width="400"><input id="firstname" name="firstname" /><br>
              <span id="firstname_msg" name="firstname_msg" class="show_msg">test</span>
          </td>
        </tr>


        <tr>
          <td align="right" valign="top" width="200"><label for="firstname">Comment</label></td>
          <td align="left" valign="top" width="400"><input id="comment" name="comment" /><br>
              <span id="comment_msg" name="comment_msg" class="show_msg">test</span>
          </td>
        </tr>


        <tr>
          <td colspan="2">
            <input type="submit" name="btnUpdate" id="btnUpdate" value="update" size="20"

onclick="f_action_process('btnUpdate')"/>
            <input type="submit" name="btnSubmit" id="btnSubmit" value="submit" size="20"

onclick="f_action_process('btnSubmit')"/>
            <input type="submit" name="btnCancel" id="btnCancel" value="cancel" size="20"

onclick="f_action_process('btnCancel')"/>
            <input type="hidden" name="action_process" id="action_process" value="" size="20">
         </td>
        </tr>
      </table>
   </fieldset>
</form>

This is not a complete form designed i want to build but it meet my purpose..

The jquery form validation is worked perfect if the form only contain ONE button submit action taken, but it have difficulty when i want to apply for MULTIPLE button / difference rule apply for each button action.

Still can't figure out how to make this work.

Your help is very appreciated.

Regard
Keong

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

are there not different triggers that load the form based on user interaction? For example, if someone is cancelling, do they use same trigger to view form as they do is they are submitting new?

EDIT: there are other ways also to do required dependencies based on things like a checkbox value. These are outlined in the docs and are put into the validation options

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi charlietfl

Let said this is a form used to show a record detail, the STATUS of this record is OPEN.

There is 3 button action :
    1) [Update] - To Update Record only.
                     - Will validate ALL form field when submit the record to process in action page.

    2) [Submit] - Submit this record to next level process. eg STATUS = OPEN change to STATUS = PROCESS
                     - Will validate ALL form field when submit the record to process in action page.


    3) [Cance] - Cancel Record
                    - User need to enter COMMENT form field (or more, depend the requirement). Others form field will ignored.

    1 and 2 will using the same validation roles, but 3 will have difference roles apply.

    The issue now is, It seem only can used ONE validation roles only. I can't change the role instantly base on the user interaction.

    eg : when i click CANCEL button, it will check COMMENT form field only, not all form field.


   Thank for your time. Very appreciated it.

Regard
Keong

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

so what about using a control like a checkbox that is used for "cancel". You could then hide the rest of the form, and write required dependency rules based on the checkbox.

If it was me I would have a different trigger to display the form for a cancel, and then only show the field necessary when form loads

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi charietfl

Thank for your information and sharing..

   Well.. In my existing form designed, it will showed all button for user to clicked and do necessary action.

   The CANCEL is just one of the action button, In my existing project form designed, it have other button where used to update other fields based on the User access right,

   Eg, Administrator able to update the Start Date and End date by just change the date and click [Update Date] button beside the Date field.

         There is other button only for administrator to update difference field.

   That why i need to figure out how i can change the rules via clicking the button as trigger.

   So far i can't found any sample via internet. Hope some one can help me this.

   Thank for your time.

Regard
Keong

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi all..

May i know anyone know how to fixed this issue?

Regard
Keong

jules

Re: jquery form validation plugin issue : Please help

11 months ago

Take a look at this post
http://stackoverflow.com/questions/4625078/validate-different-fields-on-click-of-different-buttons-in-the-same-html-form-thr

charlietfl

Re: jquery form validation plugin issue : Please help

11 months ago

there are other more complex ways to manage this based on the buttons, but since your skill level is beginner I tried to steer you through simpler coding methods.

If you are unable to make the variety of solutions I have suggested for you work, you may want to get someone who has a better level of jQuery form handling/validation to code this for you

keonglah

Re: jquery form validation plugin issue : Please help

11 months ago

Hi Jules

Thank for your update.. I will try it when i finish all my pending task.

You help is very appreciated.

Regard
Keong

Top Reply

Response title

Attachments

jQuery Forum

jquery form validation plugin issue : Please help

Replies(17)

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Re: jquery form validation plugin issue : Please help

Statistics

Tags

Actions

Related Posts