When editing an existing document in React, Meteor Simple Schema validation on client side always returns 'true', despite invalid form data

Question

I have a form component in React that can be used to either save a new address, or edit an existing address object in MongoDB. I am using SimpleSchema for client-side schema validation (as well as server-side schema validation).

The document is being passed as a prop to the form with shippingAddress:

<ShippingAddressForm
    onChange={this.handleAddressChange.bind(this)} 
    shippingAddress={shippingAddress}
    editModeType={editModeType}
/>

In case of New Address mode type, shippingAddress is passed as a skeleton object:

shippingAddress = {
    firstName: "",
    address: "",
    city: "",
    zipCode: "",
    company: "",
    lastName: "",      
    address2: "",
    state: "",
    addressTypeSelected: "",
    country: "US",
    phoneNumber: ""
}

In case of Edit Address, shippingAddress is used to pass corresponding values from existing MongoDB document:

shippingAddress = {
    address: "Arcadia Bay Ct"
    city: "Delray Beach"
    company: "AT&T"
    country: "US"
    createdAt: Tue Aug 23 2016 11:59:13 GMT+0530 (IST)
    favorite: false
    firstName: "Max"
    label: "Arcadia Bay Ct"
    lastName: "Pricefield"
    phoneNumber: "987654321"
    state: "FL"
    userId: "WEwmG3iYgShasmzGT"
    zipCode: "33446"
}

Then the ShippingAddressForm inputs are populated using these values.

Before submitting the form, I validate the formData using a React handler. (This is being done via a submit button in a higher-level component, to which any state changes are regularly propagated.)

onSubmitHandler() {
    // get address from form
    // check it's complete and send error messages
    // if successful save and return to address book    
    const { userId, saveShippingAddress } = this.props;
    let formData = this.state.shippingAddress
    let invalidKeys,
        validityContext = AddressSchema.namedContext("shippingAddress");

    formData.userId = userId;
    formData.label = formData.address;
    AddressSchema.clean(formData);

    if(!validityContext.validate(formData)) {
      invalidKeys = validityContext.invalidKeys();
      invalidKeys =  _.map(invalidKeys, function (o) {
        return _.extend({message: validityContext.keyErrorMessage(o.name)}, o);
      });
      return toastr.error(invalidKeys[0].message, 'Error');      
    }
    return saveShippingAddress(formData);     
}

The validation in the above function works perfectly in case of a New Address. If any required key is missing, validityContext.validate(formData) returns false as it should.

However, in case of Edit Address, validityContext.validate(formData) always returns true, even if the data is invalid and required keys are missing etc.

I have checked the formData object being passed into the .validate() function, it is fine. It is not passing the old database object. If my form is missing a 'Last Name' field entry, then formData object is also missing a lastName key. But the SimpleSchema validator still returns true in edit mode.

I have also tried checking just one key using .validateOne(). Same issue occurs there.

The same invalid data is then being caught in server-side validation check and error is returned. However, I need the client-side validation to work in all cases as well.

I am not using MongoDB modifiers.

Has anyone else faced this issue?

When editing an existing document in React, Meteor Simple Schema validation on client side always returns 'true', despite invalid form data

0 Answers0