Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need jquery Validation help to make it wirth with jquery UI submission

Posted on 2012-12-30
10
Medium Priority
?
331 Views
Last Modified: 2013-01-22
Hi Experts I need your help in fixing up my jquery UI form submission validation to work with jquery Validation Plugin. Currently the Jquery UI code i am using for submission is the below:

submitUsers = function() {
    
    $('#tabs_users>#ui-tabs-2').on('click', '.submitusers', function() {
        var dataString = $("form").serialize();
        $.ajax({
            type: "POST",
            url: "save.cfm?mode=useraction" + '&submission=' + Math.random(),
            cache: false,
            data: dataString,
            success: function(result) {
                var i = result;
                $('#tabs_users>#ui-tabs-2').off('click', '.submitusers');
                if ($.trim(i) == 'Warning! Country with Same Name already Exists' || $.trim(i) == 'Warning! Code for the Entered Country Exists for another Country' || $.trim(i) == 'Warning! Code and Country already Exists') {
                    $("#AddCountry").html(result).addClass('text-warning');
                    $("#AddCountry").addClass('text-warning').fadeIn("slow");
                    setTimeout(function() {
                        $("#AddCountry").addClass('text-warning').fadeOut("slow");
                    }, 3000);
                } else if ($.trim(i) == 'Cool! Processed Successfully') {
                    $("#AddCountry").html(result).addClass('text-success');
                    $("#AddCountry").addClass('text-success').fadeIn("slow");
                    setTimeout(function() {
                        $("#AddCountry").addClass('text-success').fadeOut("slow");
                    }, 3000);
                } else {
                    $("#AddCountry").html(result).addClass('text-error');
                    $("#AddCountry").addClass('text-error').fadeIn("slow");
                    setTimeout(function() {
                        $("#AddCountry").addClass('text-error').fadeOut("slow");
                    }, 3000);
                }
            }
        });
    });
}

Open in new window


I want to make the validation to work with this, How can i add validation plugin to this.

My form has following fields

<form id="adduser" name="adduser">
<label>Username</label>
        <input type="text" id="username" class="input-block-level-inputfields" name="username" placeholder="Username">
        <label>Password</label>
        <input type="password" id="password" name="password" class="input-block-level-inputfields" placeholder="Password Please" />
        <label>Full Name</label>
        <input type="tel" name="fullname" id="fullname" class="input-block-level" placeholder="Your Complete Full Name" />
        <label>Password Hint</label>
        <input type="text" name="passwordhint" id="passwordhint" class="input-block-level-inputfields" placeholder="Provide Password Hint (optional)" />
        <label>Security Question</label>
        <input type="text" class="input-block-level" placeholder="Security Question" id="question" name="question" />
        <label>Answer</label>
        <input type="text" class="input-block-level" placeholder="Security Answer to the above Question" id="answer" name="answer" />
        <label>Email Address</label>
        <input type="text" name="email" id="email" placeholder="Email Address" class="input-block-level" />
        <label>Role</label>
        <select name="rolesection" id="rolesection" class="input-block-level-inputfields">
        	<option value="1">Admin</option>
            <option value="2">Staff</option>
            <option value="3">User</option>
        </select>
        <label>Status</label>
        <select name="confirmed" id="confirmed" class="input-block-level-inputfields">
        	<option value="1">Confirmed</option>
            <option value="2">Blocked</option>
        </select>
        <br />
        <input type="button" class="btn submitusers" name="sbtuser" id="sbtuser" value="Submit" onclick="javascript:submitUsers();">
</form>

Open in new window

0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 38730697
Hi,

What have you tried so far?

Darren
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38730706
honestly few tricks but none worked so far and kept deleting after every failed try
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 38730728
Ok,
Using http://bassistance.de/jquery-plugins/jquery-plugin-validation/, you need to include the plugin
Attached the validation to the page:

$("#adduser").validate();

add a class to the form fields, so for email address:

<input type="text" class="required email" name="email" id="email" placeholder="Email Address" class="input-block-level" />

and that will validate this field, you will just need to disable the button then until the form is valid
0
Google Certified Professional - Cloud Architect

This course (1 of 3) is designed to help students who are interested in Google Cloud Platform (GCP) to become familiar with the platform, navigate the console and learn its capabilities. It will also prepare students for the Google Cloud Architect certification exam.

 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38730741
Thanks, I was trying with this plugin, But my question is:

1. where i add this, when i am doing the on click event of the function or before

2. how can i stop its processing unless all errors has been cleared.
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 38730750
add it before,
on keyup call $("#adduser").valid() this will return T/F and then based on this enable/disable the submit button
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38730905
i want to have validation on submit of the Page, not on keyup. anyways, i am still looking for solution. Thanks anyways, when i do it, i will post the answer here
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 38730914
0
 
LVL 11

Accepted Solution

by:
mcnute earned 2000 total points
ID: 38732314
I wouldn't wrap that click function again in a function so take it simply out of your submitUsers function and let jquery handle the click event.

The plugin that darren-w- suggested is really cool and simple it is just your validation handling that is to be refined. What you want is to send the ajax request only on positive validation. This is automatically done by the plugin. No need to programme that it will abort the submission of the form automatically for you.

I've played around with it in jsfiddle and created this example. It is working for me and validating.

Ajax request testing
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38739861
Thanks, But it is going in both the commands, if and the lese too
untitled.GIF
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38739933
You're doing a validation in your ajax with code that's coming from the server side. So it is not possible to validate data which is processed by the server without submitting the form.

What you can do is to populate the form with the primary submitted values stored in your i variable and sent that back to the form when thir first if clause and or the else is true.

Or:

What would make more sense is to submit that form to the same page the form is on (without ajax involved) and on the server side redirect to a success page if data was alright, or just stay on the original form page and 'paste' original input values in the form, so the user doesn't have to input it again and display error messages accordingly.

Hope I got the point for you.

Good Luck anyways!
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

664 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question