Validating your form_Sencha Touch Cookbook-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

Validating your form

So far, we have looked at how to create a form and make use of different form fields offered by Sencha Touch. Different form fields provide different kinds of information a user can enter. Now, some of them may be valid and some may not. It is a common practice to validate the form and the entered values at the time of posting. Now, based on your application architecture, you may choose to apply all kinds of validations in the frontend UI, or you may choose to handle them in the backend server code, or a combination of the two. All are valid approaches. However, for this chapter, we would assume that we want to validate the form on the frontend to make sure that the values entered are valid.

Sencha Touch does not offer a mechanism to do form validation. As of now, it has no direct support for validating the inputs. If we intend to validate the form, then the code has to be written to do so. There are various approaches to building the form validation capability, depending upon what level of abstraction and re-usability we want to achieve. We can write a specific code in each form to carry out the validation or we can enhance Ext.Component, which is the base class for all the Sencha Touch components, or the Ext.form.Field classes to handle the validation in a more generic way. Alternatively, we can enhance FormPanel, as well, to implement a nicely encapsulated form and field validation functionality. In this recipe, we will see how we can write the specific validation code to take care of our need. The author hopes that there will be a more streamlined validation in a future version of Sencha Touch.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

Make sure that you have followed the Getting your form ready with FormPanel recipe in this chapter.

How to do it...

Carry out the following steps:

Copy ch02_01.js to ch02_13.js and modify the handler function with the following code:

handler: function() {
  var isValid = true;
  var errors = new Array();
  
  var fieldValMap = form.getValues();
  var email = fieldValMap['email'];
  var name = fieldValMap['name'];
  //validate the name                        
  if (name.search(/[0-9]/) > -1) {
    isValid = false;
    errors.push({field : 'name',
    reason : 'Name must not contain numbers'});
  }
  
  //validate e-mail                        
  if (email.search("@") == -1) {
    isValid = false;
    errors.push({field : 'email',
    reason : 'E-mail address must contain @'});
  }                                           
  
  //show error if the validation failed                        
  if (!isValid) {
    var errStr = "";
    
    Ext.each(errors, function(error, index){
      errStr += "[" + (index+1) + "] - " + error.reason + "\n";
    });
    
    Ext.Msg.alert("Error", errStr);
  } else {//form is valid
    form.submit();
  }
}

Include ch02_13.js in place of ch02_12.js in index.html.
Deploy and access the application in the browser.

How it works...

The handler function is called when the user clicks on the Save button. The handler validates the name and the e-mail address field values. name.search(/[0-9]/) checks if the name entered contains any numbers and email.search("@") verifies if the e-mail address contains @ or not. In case of an error, we are adding an error object to the errors array with two properties: field and reason. The field property stores the field on which the validation had failed and the corresponding reason is stored in the reason property. After all the fields have been validated, we are checking the isValid flag to see if any of the field validation had failed and, if so, we show up a message box with the list of errors, as shown in the following screenshot:

If there are no field validation errors, then the form is submitted.