Use form validation for address picker. See #1574.

js/app/cart/components/Cart.js

@@ -45,7 +45,8 @@ class Cart extends Component {
  geohash={ '' }
  key={ this.props.streetAddress }
  onAddressSelected={ (value, address) => this.props.changeAddress(address) }
- disabled={ this.props.isCollectionOnly || this.props.takeaway } />
+ disabled={ this.props.isCollectionOnly || this.props.takeaway }
+ required />
  { this.props.isCollectionEnabled && (
  <div className="text-center">
  <Takeaway

js/app/forms/delivery.js

@@ -6,7 +6,7 @@ import _ from 'lodash'
 import AddressBook from '../delivery/AddressBook'
 import DateTimePicker from '../widgets/DateTimePicker'
 import TagsInput from '../widgets/TagsInput'
-import i18n from '../i18n'
+import { validateForm } from '../utils/address'
 
 class DeliveryForm {
  disable() {
@@ -340,21 +340,9 @@ export default function(name, options) {
  const lngInput = document.querySelector(`#${name}_${type}_address [data-address-prop="longitude"]`)
  const streetAddrInput = document.querySelector(`#${name}_${type}_address_newAddress_streetAddress`)
 
- if (searchInput.validity.valid) {
- if (_.isEmpty(latInput.value) || _.isEmpty(lngInput.value)
- || (searchInput.value !== streetAddrInput.value)) {
- e.preventDefault();
- searchInput.setCustomValidity(i18n.t('PLEASE_SELECT_ADDRESS'))
- if (HTMLInputElement.prototype.reportValidity) {
- searchInput.reportValidity()
- }
-
- return true
- }
- }
-
- return false
+ const isValid = validateForm(e, searchInput, latInput, lngInput, streetAddrInput)
 
+ return !isValid
  })
 
  }, false)

js/app/restaurant/index.js

@@ -14,6 +14,7 @@ import i18n, { getCountry } from '../i18n'
 import { createStoreFromPreloadedState } from '../cart/redux/store'
 import { addItem, addItemWithOptions, queueAddItem } from '../cart/redux/actions'
 import Cart from '../cart/components/Cart'
+import { validateForm } from '../utils/address'
 
 require('gasparesganga-jquery-loading-overlay')
 
@@ -300,6 +301,16 @@ window.initMap = function() {
  }
  }
 
+ $(container).closest('form').on('submit', function (e) {
+
+ const searchInput = document.querySelector('#cart input[type="search"]')
+ const latInput = document.querySelector('#cart_shippingAddress_latitude')
+ const lngInput = document.querySelector('#cart_shippingAddress_longitude')
+ const streetAddrInput = document.querySelector('#cart_shippingAddress_streetAddress')
+
+ validateForm(e, searchInput, latInput, lngInput, streetAddrInput)
+ })
+
  const state = {
  cart,
  restaurant,

js/app/utils/address.js

@@ -0,0 +1,25 @@
+import _ from 'lodash'
+import i18n from '../i18n'
+
+export const validateForm = (e, searchInput, latInput, lngInput, streetAddrInput) => {
+
+ if (!searchInput.validity.valid) {
+ return
+ }
+
+ const isValidLatLng = !_.isEmpty(latInput.value) && !_.isEmpty(lngInput.value)
+ const isStreetAddressTouched = searchInput.value !== streetAddrInput.value
+
+ if (isStreetAddressTouched || !isValidLatLng) {
+ e.preventDefault();
+
+ searchInput.setCustomValidity(i18n.t('PLEASE_SELECT_ADDRESS'))
+ if (HTMLInputElement.prototype.reportValidity) {
+ searchInput.reportValidity()
+ }
+
+ return false
+ }
+
+ return true
+}