How to limit user text input and disable send button in JSQMessagesViewController

Question

I am building a messaging app using JSQMessagesViewController and I was wondering if there would be a way for me to require a user's text input to be between 10 and 140 characters in length.

I have put this following piece of code

if (text.characters.count <= 10 || text.characters.count >= 140) {
            self.inputToolbar.sendButtonOnRight = false
        }
        else {
            self.inputToolbar.sendButtonOnRight = true
        }

in several key spots such as the function didPressSendButton:

override func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!,
                                     senderDisplayName: String!, date: NSDate!) {

        let itemRef = messageRef.childByAutoId() // 1
        let messageItem = [ // 2
            "text": text,
            "senderId": senderId,
            "location": getLocation()
        ]
        itemRef.setValue(messageItem) // 3

        // 4
        JSQSystemSoundPlayer.jsq_playMessageSentSound()

        // 5

        finishSendingMessage()

        Answers.logCustomEventWithName("Message sent", customAttributes: nil)

    }

and my addMessages function:

func addMessage(id: String, text: String, displayName: String) {
    let message = JSQMessage(senderId: id, displayName: displayName, text: text)
    messages.append(message)
}

like such:

func addMessage(id: String, text: String, displayName: String) {

if (text.characters.count <= 10 || text.characters.count >= 140) {
    self.inputToolbar.sendButtonOnRight = false
}
else {
    self.inputToolbar.sendButtonOnRight = true
    let message = JSQMessage(senderId: id, displayName: displayName, text: text)
    messages.append(message)

}

}

However that does not work.

What kind of works for me is doing this in my addMessages function:

if (text.characters.count <= 10 || text.characters.count >= 140) {
        // pass
    }
    else {
        let message = JSQMessage(senderId: id, displayName: displayName, text: text)
        messages.append(message)
    }

In this case, the character filter works but the send button is still enabled, so the data is sent to my database, which I do not want. It would work a lot better for me if the send button was just disabled entirely if the text input is not long enough or too long.

If anybody would be able to help me with this, that would be great. Thanks!

Answer 1

You should not remove the button from the bar but instead just disable it. I would first suggest setting a disabled state for the button with something like this.

let sendButton = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 35)) //You can change these values to fit your needs
sendButton.setTitle("Send", forState: .Normal)
sendButton.setTitleColor(UIColor.grayColor(), forState: .Disabled)
sendButton.setTitleColor(UIColor.whiteColor(), forState: .Normal) 
sendButton.contentMode = .Center
self.inputToolbar?.contentView?.rightBarButtonItem = sendButton

Then you want to set the userInteractionEnabled property on that button based on the length of the string in the input field. We can accomplish this by setting an observer on that.

First get a reference to the inputField. let inputField = self.inputToolbar.contentView.inputView Then set up a observer on that field and change the sendButtons state.

NSNotificationCenter.defaultCenter().addObserverForName(UITextFieldTextDidChangeNotification, object: inputField, queue: NSOperationQueue.mainQueue()) { (notification) in
        let text = self.inputField.text

You do not need parentheses () around if statements. Also I would swap your logic around

if text.characters.count >= 10 && text.characters.count <= 140 {
        if text == self.verifyPasswordField.text {
            self.sendButton.enabled = true
        } else {
            self.sendButton.enabled = false
        }
    }

if you want to be a swift ninja you can do shorthand for this with.

self.sendButton.enabled = (text.characters.count >= 10 && text.characters.count <= 140)

just throw that in a function and make sure you call it and you should be good to go. The Button should update its color if the input text does not meet the criteria. But you also may want to tell your users that, that is the reason the button is disabled but that is just my opinion. I hope this helped let me know if you have any more questions. 🖖🏽