Solved

Best way to validate from fields before ajax submission

Posted on 2014-03-22
8
491 Views
Last Modified: 2014-03-25
Hi,

I need to validate form and once the form is validated then the ajax should submit the form?

validate method -> true -> call ajax -> form submitted...
0
Comment
Question by:Rocking
8 Comments
 
LVL 22

Expert Comment

by:Mrunal
Comment Utility
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
0
 

Author Comment

by:Rocking
Comment Utility
is it the best approach to create a plain java script method to do the validation and then check in the another function its return value and then call ajax to submit the form?

function validate(){
xxx
xxx
xxxx

return true/false
}

function SubmitFrm() {
 var chkfrmValidation = validate();
//if the return value true go for ajax
       {
            $.ajax({
                  type : 'post',
                  url : 'testsubmit',
                  data : $('#registerform').serialize(),
                  async : false,
                  dataType : "text",
                  beforeSend : function() {
                        $.blockUI({ message: '<h1><img src="../img/loading.gif" /> Processing...</h1>'});
                  },
                  complete : function() {
                        $.unblockUI();
                  },
                  success : function(data) {
                  $.unblockUI();
                        alert(data);
                        
                  },
                  error : function(data) {
                        // check status && error
                  }

            });
      }
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 80 total points
Comment Utility
I prefer this

$(function() {
  $("#formId").on("submit",function(e) {
    e.preventDefault();
    if (.......) {
      $.ajax(...)
    }
  });
});
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Rocking
Comment Utility
What if we call the validate function in   beforeSend : function() {} ?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Why even start the ajaxing if not valid?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Why even start the ajaxing if not valid?
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 30 total points
Comment Utility
greetings him121, Here you ask -
 "is it the best approach to create a plain java script method to do the validation and then check in the another function its return value and then call ajax to submit the form?"

Right, , That would get it done, to use the function validate(), and if TRUE then proceed to the ajax.

The  ajax   beforeSend : function()   is NOT the place to do the validate, as this beforeSend is suppose to be a place to RE-configure the ajax headers and other PRE ajax send adjustments or Call in a wait image, , , , beforeSend is not a place to do work outside of the necessary Ajax stuff .

No one can say if "is it the best approach", since there are many ways to go through the processes (validation, get form input data, send the ajax to server).

But you seem to be new at doing this sort of thing, so are you asking for suggestions on how to do this with plain javascript, or with just jQuery javascript,

or what sort of answers could help you here?
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now